何为Font-Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)

优势

目前图标总数共有519个;
不依赖Javascript
矢量图形,无限缩放
免费,可用于商业
CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
支持retina显示(苹果retina 屏幕)
源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
兼容屏幕阅读器
图标用到的animation适用于IE8~9

缺点

不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)

获取Font-Awesome

官网 — 点击Download即可下载最新版本
Github — Font-Awesome仓库

使用方法

本地使用

下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:

CSS — 字体的引入,图标基础样式,大小等
fonts — CSS需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)
less — 各种参数自定义的less文件,用来自定义Font awesome
sass — 各种参数自定义的sass文件,用来自定义Font awesome

SASS和LESS都是CSS预处理器

把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例

代码内含注释—应该很好理解

建议:用Chrome F12调试,一边查看注释一边折腾更妙

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Font-Awesome完整教程</title>

    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--生产环境建议用压缩版本,非压缩版本建议学习使用 -->

    <style>

      * {

        outline: 0px;

        border: 0px;

        margin: 0px;

        padding: 0px;

      }

      div {

        border: 2px solid #882BEF;

        margin: 30px;

        width: 500px;

        height: auto;

      }

      ul {

        list-style: none;

      }

      div {

        border: 2px solid #882BEF;

        margin: 30px;

        width: 500px;

        height: auto;

      }

      .extraHeight {

        height: 400px;

      }

      .extraHeight ul li {

        margin: 10px auto;

      }

      <!--啊咧,这上面所有样式只是让效果显示排版一下而增加的-->

    </style>

  </head>

  <body>

    <div class="icon-test-list">

      <h1>图标基础样式</h1>

      <ul>

        <li><i class="fa fa-weixin"></i>微信</li>

        <li><i class="fa fa-whatsapp"></i>whatsapp</li>

        <li><i class="fa fa-youtube"></i>youtube</li>

        <li><i class="fa fa-weibo"></i>新浪微博</li>

      </ul>

    </div>

    <div class="icon-test-list">

      <h1>图标规格样式</h1>

      <span></span>

      <ul>

        <li><i class="fa fa-weixin "></i>微信</li>

        <li><i class="fa fa-weixin fa-lg"></i>微信lg</li>

        <li><i class="fa fa-weixin fa-2x"></i>微信</li>

        <li><i class="fa fa-weixin fa-3x"></i>微信3x</li>

        <li><i class="fa fa-weixin fa-4x"></i>信4x</li>

        <li><i class="fa fa-weixin fa-5x"></i>微信5x</li>

      </ul>

    </div>

    <!--

    fa-lg比常规图标大33%,而2X~5x都是常规图标大小的倍数,具体可以用F12调试查看计算

    也可以去查看less的规则

    -->

    <div class="icon-test-list">

      <h1>图标固定大小</h1>

      <ul>

        <li><i class="fa fa-fw fa-weixin"></i>微信</li>

        <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>

        <li><i class="fa fa-fw fa-youtube"></i>youtube</li>

        <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>

      </ul>

    </div>

    <!--

    fa-fw是用来固定大小的

    -->

    <div class="icon-test-list extraHeight">

      <h1>图标边框及图标移动</h1>

      <ul>

        <li><i class="fa fa-tag  pull-right"></i>这是一句测试的文字,图标定位在右边</li>

        <li><i class="fa fa-tag fa-2x pull-left "></i>

          <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>

        </li>

        <li><i class="fa fa-search fa-3x pull-right fa-border"></i>

          <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>

        </li>

      </ul>

    </div>

    <!--

    fa-border 可以给图标加一个边框

    pull-right和pull-left可以控制图标位置,是文字环绕

    -->

    <div class="icon-test-list">

      <h1>图标动画</h1>

      <ul>

        <li><i class="fa fa-spin fa-2x  fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>

        <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>

      </ul>

    </div>

    <!--

        在less里面定义

        spin的速度是linear(匀速),一圈2s

        pulse分为八步,一圈时间1S

        -->

    <div class="icon-test-list">

      <h1>图标旋转</h1>

      <ul>

        <li><i class="fa fa-hand-o-up  "></i>手:默认状况</li>

        <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>

        <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>

        <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>

        <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>

        <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>

      </ul>

    </div>

    <!--

         fa-rotate-*:来控制旋转的度数

         fa-flip-*:两个参数来控制水平和垂直

        -->

    <div class="icon-test-lise">

      <h1>堆叠图标:合并图形</h1>

      <ul>

        <li>

          <span class="fa-stack">

            <i class="fa fa-stack-2x  fa-bookmark-o"></i>

            <i class="fa fa-stack-1x  fa-child"></i>

          </span>随便找的两个图标合成

        </li>

        <li>

          <span class="fa-stack">

            <i class="fa fa-stack-2x  fa-lemon-o"></i>

            <i class="fa fa-stack-1x  fa-chain "></i>

          </span>随便找的两个图标合成

        </li>

        <li>

          <span class="fa-stack">

            <i class="fa fa-stack-2x fa-wheelchair"></i>

            <i class="fa fa-stack-1x fa-transgender-alt"></i>

          </span>随便找的两个图标合成

        </li>

        <li>

          <span class="fa-stack fa-2x">

            <i class="fa fa-stack-1x  fa-comment"></i>

            <i class="fa fa-stack-2x  fa-linux"></i>

          </span>随便找的两个图标合成

        </li>

        <li>

          <span class="fa-stack fa-3x">

            <i class="fa fa-stack-1x   fa-chain"></i>

            <i class="fa fa-stack-2x  fa-circle-o "></i>

          </span>随便找的两个图标合成

        </li>

        <li>

          <span class="fa-stack fa-lg">

              <i class="fa fa-circle fa-stack-2x"></i>

              <i class="fa fa-flag fa-stack-1x fa-inverse"></i>

            </span>随便找的两个图标合成

        </li>

      </ul>

    </div>

    <!--

    fa-stack作为父,组合子元素生成的对象;可以使用规格参数

    fa-stack-2x 作为背景的栈,要大于显示图形的栈

    fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈

    fa-inverse 用来反转图标颜色,生成可见图标组

    -->

  </body>

</html>

CND引用AweSome(推荐)

只要把head内引用本地awesome的位置改下即可

<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

图标大全

Font Awesome — 图标有分类,带搜索功能
Font Awesome Cheatsheet — 图标汇总表

Font-Awesome最新版完整使用教程的更多相关文章

sublime3+quick3.5 完整使用教程
sublime3+quick3.5 完整使用教程 Administrator 2015-07-15 14:43:08 1. 安装Sublime3 2. 注册Sublime3 Help- ...
BI之SSAS完整实战教程7 -- 设计维度、细化维度中：浏览维度，细化维度
上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我 ...
BI之SSAS完整实战教程6 -- 设计维度、细化维度上：创建维度定义特性关系
前面我们使用过数据源向导.数据源视图向导.Cube向导来创建相应的对象. 本篇我们将学习使用维度向导来创建维度. 通过前面几个向导的学习,我们归纳一下共同点,主要分成两步 1. 使用某种对象类型的向导 ...
BI之SSAS完整实战教程5 -- 详解多维数据集结构
之前简单介绍过多维数据集(Cube)的结构. 原来计划将Cube结构这部分内容打散,在实验中穿插讲解, 考虑到结构之间不同的部分都有联系,如果打散了将反而不好理解,还是直接一次性全部讲完. 本篇我们将 ...
BI之SSAS完整实战教程4 -- 部署至SSAS进行简单分析
上一篇已经创建了多维数据集的结构. 接下来我们将多维数据集的架构定义发送到Analysis Services实例,部署到AS上去. 文章提纲部署和浏览多维数据集 SSMS使用简介总结一.部署和浏 ...
BI之SSAS完整实战教程2 -- 开发环境介绍及多维数据集数据源准备
上一篇我们已经完成所有的准备工作,现在我们就开始动手,通过接下来的三篇文章创建第一个多维数据集. 传统的维度和多维数据集设计方法主要是基于现有的单源数据集. 在现实世界中,当开发商业智能应用程序时,很 ...
BI之SSAS完整实战教程1 -- 开篇， BI简介 & SSAS简介
文章提纲商业智能(BI, Business Intelligence)基本概念 SSAS(SQL Server Analysis Services)相关工具(开发.管理和客户端) 总结一.商业智能 ...
新版TeamTalk部署教程
新版TeamTalk部署教程新版TeamTalk已经在2015年03月28日发布了,目前版本定为1.0.0版本,后续版本号会按照如下规则进行:1.版本规则按照x.y.z的形式进行.2.各端小bug修 ...
ubuntu下安装和配置最新版JDK8傻瓜教程
ubuntu下安装和配置最新版JDK8傻瓜教程听语音 | 浏览:18940 | 更新:2014-07-14 22:13 | 标签:ubuntu 1 2 3 4 5 6 分步阅读 ubuntu系统通常 ...

随机推荐

[POI2015]WIL-Wilcze doły（单调队列）
题意给定一个长度为n的序列,你有一次机会选中一段连续的长度不超过d的区间,将里面所有数字全部修改为0.请找到最长的一段连续区间,使得该区间内所有数字之和不超过p. (1<=d<=n< ...
svn 学习
svn命令在linux下的使用 svn命令在linux下的使用SVN软件版本管理 1.将文件checkout到本地目录svn checkout path(path是服务器上的目录)例如:svn che ...
Pythonx_day1
# python3中的 str 和 byte(即二进制)转换 msg = "β" # 转换为二进制,打印,‘encoding = 'utf-8'为值定转换原str的编码格式’ pr ...
紫书例题 10-27 UVa 10214（欧拉函数）
只看一个象限简化问题,最后答案乘4+4 象限里面枚举x, 在当前这条固定的平行于y轴的直线中分成长度为x的一段段.符合题目要求的点gcd(x,y) = 1 那么第一段1<= y <= x ...
极速响应Excel数据报表请求的一种方法
摘要通过缓存和维护Excel Workbook实例,极速响应Excel数据报表请求. 这是一个真实的大数据"云计算"项目中的解决方案,在给定的时间和资源下,只有这种方法是最简单并 ...
linux学习之高并发服务器篇（二）
高并发服务器 1.线程池并发服务器两种模型: 预先创建阻塞于accept多线程,使用互斥锁上锁保护accept(减少了每次创建线程的开销) 预先创建多线程,由主线程调用accept 线程池 3.多路 ...
UML 绘图关系
1 继承子类继承父类 2 实现实现类实现接口 3 依赖 (偶然.临时.比较弱关联) 类 A 使用了类 B,如果类 B 产生变化将会影响类A ...
iOS数字媒体开发浅析
概述自然界中的所有看到的听到的都是模拟信号,模拟信号是随时间连续变化,然而手机电脑等信息都属于数字媒体,它们所呈现的内容就是把自然界中这些模拟信号转换成数字信号然后再传递给我们.数字信号不是连续的是 ...
石子合并（区间DP）
一．试题在一个园形操场的四周摆放N堆石子(N≤100),现要将石子有次序地合并成一堆.规定每次仅仅能选相邻的两堆合并成新的一堆,并将新的一堆的石子数.记为该次合并的得分.编一程序.由文件读入堆数N及每 ...
poj 1681 Painter's Problem(高斯消元)
id=1681">http://poj.org/problem? id=1681 求最少经过的步数使得输入的矩阵全变为y. 思路:高斯消元求出自由变元.然后枚举自由变元,求出最优值. ...

Font-Awesome最新版完整使用教程