fontawesome使用技巧

• 更多分享：www.catbro.cn

• font awesome cdn链接

  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  

基本用法

• 首先引入下载的font awesome文件 html里直接使用< i class=“fa fa-camera-retro”>显示一个照相机的icon。

可使用fa-2x, fa-3x, fa-4x, or fa-5x改变icon的大小。如下：

    <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 

使用fa-ul、fa-li以无序列表展示icon。用法如下：

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

使用fa-spin平滑的旋转icon，使用fa-pulse以每次45°转动icon。使用如下：

  <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-spinner fa-pulse fa-3x fa-fw"></i> 
  <span class="sr-only">Loading...</span>