自從寫了一週文章，深深發覺要當一個部落客真是不簡單！
每天被時間追著跑，我心臟又不大顆...完全不敢拖超過11點Ｏ＿Ｏ
更深深覺得拿時程壓榨工程師很壞！！（為什麼會牽到這個，咦？）

但說真的大部分都是聽到規劃時間很長，給設計和工程的時間卻很短...這個寫下去大概有八百萬字的篇幅外加滿滿負能量(絕對不是在抱怨，我覺得一切都是挑戰嗚嗚嗚！！）
...我們還是來說點正經事好了！！

上一篇我們提到了 icon font ，今天來分享我主要使用的兩套（fontawesome和Material Design icons）套用到版面裡的方式～

照官方引導加載你要的icon font的文件

• font awesome的How to use
• material icon的How to use

這邊值得注意的點是，曾經遇到的專案中使用了外部連結來作加載，結果遇到官方改版或是伺服器無回的狀況，網站就一起掛了...
所以使用時可以稍微思考一下不同方式引入的優劣，不同的專案（例如短期活動或是長期官方），依照不同的因素，選擇方式有可能會不一樣！

記得要跟工程師溝通看看～相信他們會給出很棒的意見！

一般使用方式

因為我沒有app的開發經驗，所以這邊以web為主要介紹對象，如果你身邊有app工程師，就去問一下吧！他們會很樂意教你的！

這兩套都是使用<i>標籤作為頁面上的引用，但稍微有一點點不同！

font awesome的使用方式：

<i class="fas fa-ad"></i>

material icon的使用方式：

<i class="material-icons">face</i>

可以看到兩個都要帶入固定的class名稱fas和material-icons。
不過在font awesome中，該icon的名字是寫在class name裡，material icon則是寫在首尾標籤的中間！

偽元素使用方式

在頁面上我們經常會使用到偽元素去做出更豐富的變化！
不過當偽元素要使用的是icon font的時候，會和平常我們熟悉的稍微有點不同！

．font awesome

font awesome的使用方式：（版本4）

::before{
    content:"\要使用的font icon編號";
    font-family:"FontAwesome";
}

點入要使用的icon，就能在次標題看到屬於他的編號！（記得加斜線\喔）

2018.11.13補充：（感謝赤木大大提供）
在FontAwesome版本4中確實可以依照上述這樣寫～
但在版本5中，除了font-familly之外，還要加上font-weight這個屬性，才可以顯示對應的icon
font awesome的使用方式：（版本5）

::before{
    content:"\要使用的font icon編號";
    font-family:"Font Awesome 5 Free";
    font-weight: 900;
}

如何知道版本？

打開CSS檔案
版本4：在CSS檔案最上面，就可以看到
版本5：在CSS檔案裡，拉到最下面的就可以看到

．material icon

material icon的使用方式：

::before{
    content:"要使用的font icon名稱";
    font-family:"Material Icons";
}

（以上::before可以自己替換成::after，一切看你的需求～）

最大的不同就是一個是使用「編號」，一個是直接使用「名稱」。
相同的地方是要記得給他font-family，因為他已經文字化了，沒有指定字型的話他是無法顯示出來的！

我用codepen寫了範例，有興趣可以自己進去看看喔！

看不懂？那就留言問我，或是～～ 問你家可愛的工程師 ！！

下次見喔～（還活著的話。）