Font Awesome矢量图标框架

 

一、font awesome简介

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

  2. 不依赖Javascript

    SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

  3. 矢量图形,无限缩放

  4. 免费,可用于商业

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

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

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

  8. 兼容屏幕阅读器

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

二、font awesome下载及引入方法

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

三、font awesome使用方法

  • 基本语法

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

    Font Awesome矢量图标框架 随笔 第1张

  • 按钮中嵌套

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

    Font Awesome矢量图标框架 随笔 第2张

  • 与bootstrap一起使用

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

    Font Awesome矢量图标框架 随笔 第3张

  • 配合列表一起使用

    1 2 3 4 5 6 <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>

    Font Awesome矢量图标框架 随笔 第4张

  • 动态图标

    1 2 3 4 5 6 7 8 9 10 11 <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>

    Font Awesome矢量图标框架 随笔 第5张

  • 翻转图标

    1 2 3 4 5 6 <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

    Font Awesome矢量图标框架 随笔 第6张

  • 层叠图标

    1 2 3 4 <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>

    Font Awesome矢量图标框架 随笔 第7张

  • 与输入框一起使用

    1 2 3 4 5 6 7 8 <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>

    Font Awesome矢量图标框架 随笔 第8张

  • 与下拉列表一起

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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>

　　Font Awesome矢量图标框架 随笔 第9张

  • 竖排排列

    1 2 3 4 5 6 <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>

    　　Font Awesome矢量图标框架 随笔 第10张

  • 修改图标的大小

    1 2 3 4 5 <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

    　　Font Awesome矢量图标框架 随笔 第11张

  •  修改图标的颜色

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

    　　Font Awesome矢量图标框架 随笔 第12张

     

     

,

一、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仓库
    1 <link rel= "stylesheet"  type= "text/css"  href= "./static/awesome/css/font-awesome.min.css" >

三、font awesome使用方法

  • 基本语法

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

    Font Awesome矢量图标框架 随笔 第13张

  • 按钮中嵌套

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

    Font Awesome矢量图标框架 随笔 第14张

  • 与bootstrap一起使用

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

    Font Awesome矢量图标框架 随笔 第15张

  • 配合列表一起使用

    1 2 3 4 5 6 <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>

    Font Awesome矢量图标框架 随笔 第16张

  • 动态图标

    1 2 3 4 5 6 7 8 9 10 11 <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>

    Font Awesome矢量图标框架 随笔 第17张

  • 翻转图标

    1 2 3 4 5 6 <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

    Font Awesome矢量图标框架 随笔 第18张

  • 层叠图标

    1 2 3 4 <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>

    Font Awesome矢量图标框架 随笔 第19张

  • 与输入框一起使用

    1 2 3 4 5 6 7 8 <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>

    Font Awesome矢量图标框架 随笔 第20张

  • 与下拉列表一起

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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>

　　Font Awesome矢量图标框架 随笔 第21张

  • 竖排排列

    1 2 3 4 5 6 <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>

    　　Font Awesome矢量图标框架 随笔 第22张

  • 修改图标的大小

    1 2 3 4 5 <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

    　　Font Awesome矢量图标框架 随笔 第23张

  •  修改图标的颜色

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

    　　Font Awesome矢量图标框架 随笔 第24张

     

     

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄