Font Awesome使用方法
原文：https://www.cnblogs.com/zhaowy/p/8400244.html
Font Awesome（中文站點）是一套為Bootstrap而創造的圖示字型庫及CSS框架，在業界享有盛譽。
FA包含了常規web開發所需要用到的幾乎所有圖示，並且免費授權使用，只需要下載即可。
所有的圖示列表檢視
加入檔案
1.最簡單的方式：CDN （由BootCDN提供）
一句話將Font Awesome加入您的網頁中。您完全不用下載或者安裝任何東西！
將以下程式碼貼上到網頁HTML程式碼的 <head> 部分.
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2.下載檔案，使用預設CSS
如果您使用了預設的Bootstrap CSS樣式，那麼你可以使用這種方式來引入預設的Font Awesome CSS樣式。
- 複製整個
font-awesome資料夾到您的專案中。 - 在HTML的
<head>中引用font-awesome.min.css。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">3.LESS Ruby Gem
使用
將下面這行程式碼加入到應用的Gemfile中：
gem 'font-awesome-less'然後執行：
$ bundle或者自行安裝：
$ gem install font-awesome-less4.SASS Ruby Gem
使用 官方 Font Awesome SASS Ruby Gem 可以簡單方便的將 Font Awesome SASS 整合到Rails專案中。由
將下面這行程式碼加入到應用的Gemfile中：
gem 'font-awesome-sass'然後執行：
$ bundle或者自行安裝：
$ gem install font-awesome-sass5.進階方式：自定義 LESS 或 SASS
使用LESS或SASS的方法來自定義 Font Awesome 4.7.0 。
- 複製
font-awesome/目錄到您的專案中。 - 開啟
font-awesome/less/variables.less檔案或font-awesome/scss/_variables.scss檔案 ，然後修改@fa-font-path或$fa-font-path為您的字型目錄。 注：@fa-font-path: "../font";//字型路徑是相對於編譯的CSS目錄。 - 如果使用了靜態編譯器，那麼重新編譯LESS或SASS檔案。如果沒有，那麼現在應該一切OK了。
- 參考示例，然後開始使用Font Awesome吧!
如果需要支援IE7，那真的十分抱歉。Font Awesome從4.1.0版本開始不再支援IE7， 但更早的版本仍然支援。您可以檢視 3.2.1 的IE7支援說明。 然後呢，您可以去找那個非要支援IE7的人算賬 :)
參考示例，然後開始使用Font Awesome吧!
icon使用方法
基本圖示
您可以將Font Awesome圖示使用在幾乎任何地方，只需要使用CSS字首 fa ，再加上圖示名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ，因為它更簡潔。 但實際上使用 <span> 才能更加語義化。
<i class="fa fa-camera-retro"></i> fa-camera-retro大圖示
使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來放大圖示。
<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-fw 可以將圖示設定為一個固定寬度。主要用於不同寬度圖示無法對齊的情況。 尤其在列表或導航時起到重要作用。
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>用於列表
使用 fa-ul 和 fa-li 便可以簡單的將無序列表的預設符號替換掉。
<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-border 以及 pull-right 或 pull-left 可以輕易構造出引用的特殊效果。
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.動畫
使用 fa-spin 類來使任意圖示旋轉，現在您還可以使用 fa-pulse 來使其進行8方位旋轉。尤其適合 fa-spinner、fa-refresh 和 fa-cog
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>CSS3動畫不支援IE8-IE9。
旋轉與翻轉
使用 fa-rotate-* 和 fa-flip-* 類可以對圖示進行任意旋轉和翻轉。
<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> icon-flip-vertical組合使用
如果想要將多個圖示組合起來，使用 fa-stack 類作為父容器， fa-stack-1x 作為正常比例的圖示， fa-stack-2x 作為大一些的圖示。還可以使用 fa-inverse 類來切換圖示顏色。您可以在父容器中 通過新增 大圖示 類來控制整體大小。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<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>
fa-ban on fa-camera