因為網路的中文教學文章不齊全(為什麼你們這些前輩都不寫詳細點
)，所以自己就又來寫了一篇... font awesome是集合了許多網頁小圖(icon)，轉以css文字方式呈現在網頁裏
很多時侯，網頁程式設計師不見得有美編人員幫我們畫圖，這時 font awesome 就扮演了方便的角色，而且使用起來，也跟"文字"的方式幾乎類似。再說，font awesome的圖真的還挺美觀的。
1. 首先，到font awesome網站裏下載檔案 http://fontawesome.io/
這是免費的。這網站也有提供付費版，會優先跳出來問你，說它有更多的圖可以用，不過免費的就很夠用了，所以建議把網頁往下拉，下載底下的免費版就好。
2. 下載完之後，請解壓縮，裏面有兩個資料夾 css 和 fonts ，請把這兩個資料夾拷貝到你的網頁的目錄裏
3. 在網頁以css讀入的方式，在<head></head>之間插入css的讀取代碼(這是css導入的基本寫法，別跟我說你不會)，舉例如下：
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
4. 要插入font awesome，就跟文字<span>使用方式幾乎雷同，舉例，我們可以到 http://fontawesome.io/icons/ 查詢要插入圖片，點一下，就會出現插入的代碼，舉例
<i class="fa fa-angle-right" aria-hidden="true"></i>
然後把它貼上網頁，這樣就完成了！
5. font awesome使用方式就跟文字一樣，所以可以這麼使用
<i class="fa fa-angle-right" aria-hidden="true" style="font-size:26px"></i> (指定大小為26px)
<i class="fa fa-angle-right" aria-hidden="true" style="color:red"></i> (改成紅色)
<i class="fa fa-angle-right" aria-hidden="true" style="vertical-align: 1px"></i> (位置往上挪1px，有時font awesome不是剛好如我們想像的置中)
font awesome裏面包含百種的圖，但不是每一個我們都要用，每次都載入96K以上的檔案，可能會拖到一點網頁載入的時間，所以想要把font awesome檔案縮小，請參照此編教學，是我參考 https://blog.webjeda.com/optimize-fontawesome/ 寫出來的。一般而言，把檔案從96k縮小為10k都有可能
1. 在font資料夾裏，有副檔名為 otf, eot, svg, ttf, woff, woff2 等檔案，如果是做為純粹的網頁使用，只需要 woff 這一個，所以只要留下fontawesome-webfont.woff ，其他的不用拷貝過來
2. 檢視fontawesome-webfont.woff這個檔案還是有點大，如想要再縮小，可以到這個網站 https://icomoon.io/app/ 這個網站可以幫我們挑選出我們想要的圖並打包讓我們下載
3. 進入該網站之後，首先，點選 Import Icons ，點選我們電腦裏的fontawesome-webfont.svg (因為讀入時只接受svg檔)，它會出現視窗問我們要不要use font metrics and meta data when exporting fonts? ，點選 Yes
4. 過了一會，就會看到fontawesome-webfont被載入了。ctrl按住不放，加上滑鼠點選，就可以選擇我們要的icon
5. 選好之後， 點選右下角，Generate Font ，再點選download，就會下載一個zip檔
6. 下完成後，解壓縮zip檔，在fonts資料夾裏，有一個 icomoon.woff 檔案，你可以看到它的size比原來小了非常多
7. 把 icomoon.woff 改名為 fontawesome-webfont.woff， 然後貼到原來網頁裏的fonts資料夾裏取代舊檔. 完成！
如果想要把 font-awesome.min.css 這個檔案縮小也是可以的，原大小是40k，縮到8k都有可能，不過這就要用手工的方式了。
1. 在我們剛剛下載的icomoon.zip檔裏，解壓縮之後，有一個 style.css
2. 把 style.css 拿去和原有的 font-awesome.min.css 比對。
3. 比對之後，在 font-awesome.min.css 裏面刪除掉那些沒有在 style.css 出現過的css設定。這樣子font-awesome.min.css 就可以縮小size了。
4. 存檔 font-awesome.min.css 。完成！
小提醒，手動方式修改比較容易出錯，記得先備份原檔案，然後改好之後也要自行測試一下喔。
留言列表
