一、font awesome简介

  1. 目前图标总数共有519个;

  2. 不依赖Javascript

  3. 矢量图形,无限缩放

  4. 免费,可用于商业

  5. CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果

  6. 支持retina显示(苹果retina 屏幕)

  7. 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架

  8. 兼容屏幕阅读器

  9. 图标用到的animation适用于IE8~9

二、font awesome下载及引入方法

  • 官网 — 点击Download即可下载最新版本
  • Github — Font-Awesome仓库
    <link rel="stylesheet" type="text/css" href="./static/awesome/css/font-awesome.min.css">

三、font awesome使用方法

  • 基本语法

    <i class="fa fa-camera-retro"></i>
    

  • 按钮中嵌套

    <button>
    <i class="fa fa-trash-o fa-lg"></i> 删除
    </button>

  • 与bootstrap一起使用

    <a class="btn btn-danger" href="#">
    <i class="fa fa-trash-o fa-lg"></i> Delete
    </a>

  • 配合列表一起使用

    <ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>List icons</li>
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
    </ul>

  • 动态图标

    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

  • 翻转图标

    <i class="fa fa-shield"></i> normal<br>
    <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
    <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
    <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
    <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

  • 层叠图标

    <span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>
    </span>

  • 与输入框一起使用

    <div class="input-group margin-bottom-sm">
    <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
    <input class="form-control" type="text" placeholder="Email address">
    </div>
    <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
    <input class="form-control" type="password" placeholder="Password">
    </div>

  • 与下拉列表一起

    <div class="btn-group open">
    <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
    </a> <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
    </ul>
    </div>

  

  • 竖排排列

    <div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>
    </div>

      

  • 修改图标的大小

    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x

      

  • 修改图标的颜色

        <i class="fa fa-camera-retro" style="color: #0d71bb"></i>
    

      

 
 
 

前端基础(八):Font Awesome(图标)的更多相关文章

  1. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  2. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  3. Bootstrap <基础八>图片

    Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-r ...

  4. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  5. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  6. tableview前端基础设计(初级版)

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

  7. 前端基础——html

    前端基础——html 在用CSS布局页面的时候,我们会将HTML标签分成两种,块级元素和内联元素(我们平常用到的div和p就是块级元素,链接标签a就是内联元素) 块级(行级)标签 和 内联标签 块级元 ...

  8. 前端基础:HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  9. day14 前端基础 HTML

    从今天开始,学习前端基础. 前端,就是HTML CSS JS 等 对于我们这种初学者,并不知道这些专业术语都是什么,给大家举一个形象的例子: HTML  就是一个人,赤裸裸的人 CSS    就是衣服 ...

随机推荐

  1. nginx使用vhost子目录

    在主配置文件http模块最后添加如下一句话 [root@host---- ~]# vi /etc/nginx/nginx.conf include /etc/nginx/conf.d/*.conf; ...

  2. Docker-compose容易忽略的使用细节

    Docker-compose是docker官方的开源项目,通过使用模版yaml文件,实现对docker容器集群的管理.具体教程可以通过官方地址进行实践.Docker-compose主要有两个重要的概念 ...

  3. 用CapsNets做电能质量扰动分类(2019-08-05)

    当下最热神经网络为CNN,2017年10月,深度学习之父Hinton发表<胶囊间的动态路由>(Capsule Networks),最近谷歌正式开源了Hinton胶囊理论代码,提出的胶囊神经 ...

  4. 能力不足的C++开发会欺辱能力不足C#开发

    能力不足的C++开发会欺辱能力不足C#开发 我被C++开发欺辱的岁月   前言 人被压迫了,为什么不斗争?——鲁迅 作为一个C#开发者,我经历了,也见证了很多同行饱受C++开发的歧视和欺辱. 而且,这 ...

  5. jquery防止快速点击

    jquery防止快速点击(推荐第三种方式) //全站ajax加载提示 (function ($) { var str = '<div class="ajax-status" ...

  6. python的u,r,b分别什么意思?

      我们经常在python当中看到以下内容: print(u'hi\thi\thi') print(b'hi\thi\thi') print(r'hi\thi\thi') 在其他语言里没见过类似的,所 ...

  7. POJ2594 Treasure Exploration【DAG有向图可相交的最小路径覆盖】

    题目链接:http://poj.org/problem?id=2594 Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K T ...

  8. (二)Spring中的ioc

    目录 Spring的ioc操作 ioc底层使用的技术 ioc底层原理 ioc入门案例 bean管理(xml方式) IOC和DI的区别 Spring整合WEB的原理 Spring 整合的具体操作 Spr ...

  9. 移动端测试之APP安全测试

    现在APP测试已经是测试行业的一个重要分支,对APP测试技能和经验的要求也越来越高,看到一篇关于APP安全测试的总结,分享给需要的朋友.1.软件权限1)扣费风险:包括发送短信.拨打电话.连接网络等2) ...

  10. 轻松搭建CAS 5.x系列(3)-连接数据库,使用数据库表中的帐号做登录

    概要说明 前面的CAS SEVER中的登录帐号名是配置中写死的,实际情况中不太可能用这些方法.通常情况下,数据库的帐号名密码都是在数据库表中的,这样可以对登录帐号进行增删改的处理. 如果您对搭建固定帐 ...