何为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.

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

优势

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>Font-Awesome完整教程</title>
  7.     <link rel="stylesheet" href="css/font-awesome.min.css">
  8.     <!--生产环境建议用压缩版本,非压缩版本建议学习使用 -->
  10.     <style>
  11.       * {
  12.         outline: 0px;
  13.         border: 0px;
  14.         margin: 0px;
  15.         padding: 0px;
  16.       }
  18.       div {
  19.         border: 2px solid #882BEF;
  20.         margin: 30px;
  21.         width: 500px;
  22.         height: auto;
  23.       }
  25.       ul {
  26.         list-style: none;
  27.       }
  29.       div {
  30.         border: 2px solid #882BEF;
  31.         margin: 30px;
  32.         width: 500px;
  33.         height: auto;
  34.       }
  36.       .extraHeight {
  37.         height: 400px;
  38.       }
  40.       .extraHeight ul li {
  41.         margin: 10px auto;
  42.       }
  43.       <!--啊咧,这上面所有样式只是让效果显示排版一下而增加的-->
  44.     </style>
  45.   </head>
  47.   <body>
  48.     <div class="icon-test-list">
  49.       <h1>图标基础样式</h1>
  50.       <ul>
  51.         <li><i class="fa fa-weixin"></i>微信</li>
  52.         <li><i class="fa fa-whatsapp"></i>whatsapp</li>
  53.         <li><i class="fa fa-youtube"></i>youtube</li>
  54.         <li><i class="fa fa-weibo"></i>新浪微博</li>
  55.       </ul>
  56.     </div>
  57.     <div class="icon-test-list">
  58.       <h1>图标规格样式</h1>
  59.       <span></span>
  60.       <ul>
  61.         <li><i class="fa fa-weixin "></i>微信</li>
  62.         <li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
  63.         <li><i class="fa fa-weixin fa-2x"></i>微信</li>
  64.         <li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
  65.         <li><i class="fa fa-weixin fa-4x"></i>信4x</li>
  66.         <li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
  67.       </ul>
  68.     </div>
  69.     <!--
  70.     fa-lg比常规图标大33%,而2X~5x都是常规图标大小的倍数,具体可以用F12调试查看计算
  72.     也可以去查看less的规则
  73.     -->
  75.     <div class="icon-test-list">
  76.       <h1>图标固定大小</h1>
  77.       <ul>
  78.         <li><i class="fa fa-fw fa-weixin"></i>微信</li>
  79.         <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>
  80.         <li><i class="fa fa-fw fa-youtube"></i>youtube</li>
  81.         <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>
  82.       </ul>
  83.     </div>
  84.     <!--
  85.     fa-fw是用来固定大小的
  86.     -->
  88.     <div class="icon-test-list extraHeight">
  89.       <h1>图标边框及图标移动</h1>
  90.       <ul>
  91.         <li><i class="fa fa-tag  pull-right"></i>这是一句测试的文字,图标定位在右边</li>
  92.         <li><i class="fa fa-tag fa-2x pull-left "></i>
  93.           <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>
  94.         </li>
  95.         <li><i class="fa fa-search fa-3x pull-right fa-border"></i>
  96.           <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>
  97.         </li>
  98.       </ul>
  99.     </div>
  100.     <!--
  101.     fa-border 可以给图标加一个边框
  102.     pull-right和pull-left可以控制图标位置,是文字环绕
  103.     -->
  105.     <div class="icon-test-list">
  106.       <h1>图标动画</h1>
  107.       <ul>
  108.         <li><i class="fa fa-spin fa-2x  fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>
  109.         <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>
  110.       </ul>
  111.     </div>
  113.     <!--
  114.         在less里面定义
  115.         spin的速度是linear(匀速),一圈2s
  116.         pulse分为八步,一圈时间1S
  117.         -->
  118.     <div class="icon-test-list">
  119.       <h1>图标旋转</h1>
  120.       <ul>
  121.         <li><i class="fa fa-hand-o-up  "></i>手:默认状况</li>
  122.         <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>
  123.         <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>
  124.         <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>
  125.         <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>
  126.         <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>
  127.       </ul>
  128.     </div>
  129.     <!--
  130.          fa-rotate-*:来控制旋转的度数
  131.          fa-flip-*:两个参数来控制水平和垂直
  132.         -->
  134.     <div class="icon-test-lise">
  135.       <h1>堆叠图标:合并图形</h1>
  136.       <ul>
  137.         <li>
  138.           <span class="fa-stack">
  139.             <i class="fa fa-stack-2x  fa-bookmark-o"></i>
  140.             <i class="fa fa-stack-1x  fa-child"></i>
  141.           </span>随便找的两个图标合成
  142.         </li>
  143.         <li>
  144.           <span class="fa-stack">
  145.             <i class="fa fa-stack-2x  fa-lemon-o"></i>
  146.             <i class="fa fa-stack-1x  fa-chain "></i>
  147.           </span>随便找的两个图标合成
  148.         </li>
  149.         <li>
  150.           <span class="fa-stack">
  151.             <i class="fa fa-stack-2x fa-wheelchair"></i>
  152.             <i class="fa fa-stack-1x fa-transgender-alt"></i>
  153.           </span>随便找的两个图标合成
  154.         </li>
  155.         <li>
  156.           <span class="fa-stack fa-2x">
  157.             <i class="fa fa-stack-1x  fa-comment"></i>
  158.             <i class="fa fa-stack-2x  fa-linux"></i>
  159.           </span>随便找的两个图标合成
  160.         </li>
  161.         <li>
  162.           <span class="fa-stack fa-3x">
  163.             <i class="fa fa-stack-1x   fa-chain"></i>
  164.             <i class="fa fa-stack-2x  fa-circle-o "></i>
  165.           </span>随便找的两个图标合成
  166.         </li>
  167.         <li>
  168.           <span class="fa-stack fa-lg">
  169.               <i class="fa fa-circle fa-stack-2x"></i>
  170.               <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  171.             </span>随便找的两个图标合成
  172.         </li>
  173.       </ul>
  174.     </div>
  175.     <!--
  176.     fa-stack作为父,组合子元素生成的对象;可以使用规格参数
  178.     fa-stack-2x 作为背景的栈,要大于显示图形的栈
  179.     fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
  180.     fa-inverse 用来反转图标颜色,生成可见图标组
  181.     -->
  182.   </body>
  184. </html>

CND引用AweSome(推荐)

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

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

图标大全

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

  1. sublime3+quick3.5 完整使用教程

    sublime3+quick3.5 完整使用教程 Administrator   2015-07-15 14:43:08 1. 安装Sublime3   2. 注册Sublime3     Help- ...

  2. BI之SSAS完整实战教程7 -- 设计维度、细化维度中 ：浏览维度，细化维度

    上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我 ...

  3. BI之SSAS完整实战教程6 -- 设计维度、细化维度上：创建维度定义特性关系

    前面我们使用过数据源向导.数据源视图向导.Cube向导来创建相应的对象. 本篇我们将学习使用维度向导来创建维度. 通过前面几个向导的学习,我们归纳一下共同点,主要分成两步 1. 使用某种对象类型的向导 ...

  4. BI之SSAS完整实战教程5 -- 详解多维数据集结构

    之前简单介绍过多维数据集(Cube)的结构. 原来计划将Cube结构这部分内容打散,在实验中穿插讲解, 考虑到结构之间不同的部分都有联系,如果打散了将反而不好理解,还是直接一次性全部讲完. 本篇我们将 ...

  5. BI之SSAS完整实战教程4 -- 部署至SSAS进行简单分析

    上一篇已经创建了多维数据集的结构. 接下来我们将多维数据集的架构定义发送到Analysis Services实例,部署到AS上去. 文章提纲 部署和浏览多维数据集 SSMS使用简介 总结 一.部署和浏 ...

  6. BI之SSAS完整实战教程2 -- 开发环境介绍及多维数据集数据源准备

    上一篇我们已经完成所有的准备工作,现在我们就开始动手,通过接下来的三篇文章创建第一个多维数据集. 传统的维度和多维数据集设计方法主要是基于现有的单源数据集. 在现实世界中,当开发商业智能应用程序时,很 ...

  7. BI之SSAS完整实战教程1 -- 开篇， BI简介 & SSAS简介

    文章提纲 商业智能(BI, Business Intelligence)基本概念 SSAS(SQL Server Analysis Services)相关工具(开发.管理和客户端) 总结 一.商业智能 ...

  8. 新版TeamTalk部署教程

    新版TeamTalk部署教程 新版TeamTalk已经在2015年03月28日发布了,目前版本定为1.0.0版本,后续版本号会按照如下规则进行:1.版本规则按照x.y.z的形式进行.2.各端小bug修 ...

  9. ubuntu下安装和配置最新版JDK8傻瓜教程

    ubuntu下安装和配置最新版JDK8傻瓜教程 听语音 | 浏览:18940 | 更新:2014-07-14 22:13 | 标签:ubuntu 1 2 3 4 5 6 分步阅读 ubuntu系统通常 ...

随机推荐

  1. Laravel API 允许跨域访问

    服务器A请求服务器B的接口,那么一般会出现跨域问题.全解跨域请求处理办法 XMLHttpRequest cannot load http://api.console.vms3.com/api/user ...

  2. css与jquery、图标字体

    *)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...

  3. Snail—UI学习之导航视图控制器UINavigationController(系统)

    背景 有一个根视图控制器 然后跳转到第一个界面  第一个界面能够返回到根视图 也能够跳转到第二个视图 第二个视图能够直接返回到根视图 新建三个ViewController    RootViewCon ...

  4. Dojo入门篇

    Dojo是一个JavaScript实现的开源DHTML工具包,Dojo最初的目标是解决开发HTML应用程序中遇到的一些长期存在的问题.然而如今Dojo已经成为了开发RIA应用程序的利器. Dojo让W ...

  5. php数组增加元素

    php数组增加元素 截图 代码 <HTML> <HEAD> <TITLE>给数组增加元素</TITLE> </HEAD> <? $Ci ...

  6. js数组去重的常用方法总结

    最近几天朋友面试了几家,笔试题都做了关于数组去重的问题,自己在网上收集整理了一些去重的方法来学习下,感觉换不错哈!!!第一种方法: function oSort(arr){ var n = []; / ...

  7. 使用INSERT…SELECT语法插入记录（三十二）

    前面,我们在谈INSERT语句时,使用两种语句:INSERT…SELECT  和  INSERT…VALUES. INSERT…SELECT可以使用子查询.因为在写SELECT时.  ***  =   ...

  8. OpenCV中InputArray和OutputArray使用方法

    原文链接:http://blog.csdn.net/yang_xian521/article/details/7755101 看过OpenCV源代码的朋友,肯定都知道很多函数的接口都是InputArr ...

  9. Hexo High一下以及压缩排版问题

    背景介绍 集成Hight一下以及Gulp-html压缩之后出现的问题: High一下功能多次点击,会创建多个Audio对象,导致同时播放多次音乐,重音.解决办法:判断是否添加Audio对象,如果存在则 ...

  10. 【Django】ORM操作#2

    目录 必知必会的13条查询方法 单表查询之神奇的双下划线 一对多 ForeignKey 多对多 ManyToManyField 在Python脚本中调用Django环境 Django终端打印SQL语句 ...