Iron Man Day 11 - FontAwesome

by Sheng Huang Huang

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/559301e130.js"></script>
<div class="row">

</div>
<div class="col-sm-12">
  <h3>放大圖示</h3>
  <div><i class="fa fa-camera-retro"></i> 原始大小</div>
  <div><i class="fa fa-camera-retro fa-lg"></i> 33%</div>
  <div><i class="fa fa-camera-retro fa-2x"></i> fa-2x</div>
  <div><i class="fa fa-camera-retro fa-3x"></i> fa-3x</div>
  <div><i class="fa fa-camera-retro fa-4x"></i> fa-4x</div>
  <div><i class="fa fa-camera-retro fa-5x"></i> fa-5x</div>
</div>
<div class="col-sm-6">
  <h3>未固定寬度</h3>
  <div><i class="fa fa-tree"></i> Tree</div>
  <div><i class="fa fa-tags"></i> Tags</div>
  <div><i class="fa fa-spoon"></i> Spoon</div>
  <div><i class="fa fa-wifi"></i> WiFi</div>
</div>
<div class="col-sm-6">
  <h3>固定寬度</h3>
  <div><i class="fa fa-fw fa-tree"></i> Tree</div>
  <div><i class="fa fa-fw fa-tags"></i> Tags</div>
  <div><i class="fa fa-fw fa-spoon"></i> Spoon</div>
  <div><i class="fa fa-fw fa-wifi"></i> WiFi</div>
</div>

<div class="col-sm-6">
  <h3>旋轉效果</h3>  
  <div><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-cog fa-spin fa-3x fa-fw"></i></div>
</div>

<div class="col-sm-6">
  <h3>分8影格旋轉效果</h3>  
  <div><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
  <div><i class="fa fa-circle-o-notch fa-pulse fa-3x fa-fw"></i></div>
  <div><i class="fa fa-refresh fa-pulse fa-3x fa-fw"></i></div>
  <div><i class="fa fa-cog fa-pulse fa-3x fa-fw"></i></div>
</div>

<div class="col-sm-6">
  <h3>堆疊效果</h3>  
  <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>