前端基礎(八)：Font Awesome(圖標)

1、font awesome簡介

1. 目前圖標總數共有519個;

2. 不依賴Javascript

3. 矢量圖形,無限縮放

4. 免費,可用於商業

5. CSS控制樣式,自定義圖標顏色,大小,陰影,一切可能實現的效果

6. 支持retina顯示(蘋果retina 屏幕)

7. 源於BS框架(最初的目標設計使用方向),如今基本支持主流的框架

8. 兼容屏幕閱讀器

9. 圖標用到的animation適用於IE8~9

2、font awesome下載及引入方法

• 官網 — 點擊Download便可下載最新版本
• Github — Font-Awesome倉庫

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

3、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>