除了常見的 Material Icons 和 Font Awesome 提供免費圖示資源，現在又有 「icofont」可以引入 icon 到網頁中了！目前看網路上對它的討論較少，這篇主要會來談談它引入到網頁的方式。
引入方式
- 在官方網站中，找到想要引入的 icon ，點擊 Add to collection，或是直接針對某個類別把全部 icon 都下載也可以，可以參考下方圖片操作。
iconfont
- demo.html
- icofont.css
- icofont.min.css
- fonts
- icofont.eot
- icofont.svg
- icofont.ttf
- icofont.woff
- icofont.woff2
裡面最重要的就是 CSS 檔案，其他可以先不用管
3. 在 HTML 檔案裡的 <head> 標籤中引入剛剛下載完成的 icofont.min.css 檔案
<head>
<link rel="stylesheet" href="myProject/icofont/css/icofont.min.css">
</head>
4. 複製官方網站上提供的 Markup 語法到 HTML 檔案的 <body> 就可以囉
<i class="icofont-dart icofont-1x"></i>如果 icon 沒有成功顯示在網頁上
可以在剛剛下載好的檔案夾，找到 demo.html
- 參考它是怎麼引入 icon，像是查看 icon 的 class 名稱有沒有缺少，比如說 Duotone 類別的 icon 就要額外加上一個 class
想當初一直引入失敗就是卡在這裡可惡 - 也有可能一開始並沒有加入這個 icon 到 Collections 中，導致下載後 CSS 檔案裡並沒有該 icon 的樣式，可以在瀏覽器打開 demo.html 來確認有沒有加入到這個 icon
調整 icon
尺寸
加入 icofont-1x, icofont-2x 最大可以到 icofont-10x，又或是 icofont-xs, icofont-sm等 class
<i class="icofont-dart icofont-1x"></i>
<i class="icofont-dart icofont-sm"></i>
以下有整理各個 class 對應的尺寸表，供大家參考
使用 icon 取代 HTML 清單標籤前面的點點
在 ul 標籤加入 className="icofont-ul" 語法
<ul className="icofont-ul">
<i class="icofont-dart"></i>
</ul>
鏡射 & 旋轉 icon
<i class="icofont-arrow-right icofont-rotate-90"></i>
<i class="icofont-arrow-right icofont-flip-horizontal"></i>
<i class="icofont-arrow-right icofont-flip-vertical"></i>
Duotone icon
Duotone icon 一定要加入 icofont-duotone 這個 class 才會出現在網頁中！
<i class="icofont-add-users icofont-duotone"></i>更多用法可以參考官方網站裡的 Examples
特色
比較特別的是，icofont 可以自由選擇自己想要的 icon，並加入到 Collections，點擊下載就會產出相應的 CSS 檔案，不需要把整包檔案都下載，這樣可以為網頁的檔案容量省下不少空間呢！
今天就介紹到這邊，歡迎大家使用看看 icofont，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
