網頁的免費圖示資源又多了一個選擇，一起試試看 icofont 吧！
除了常見的 Material Icons 和 Font Awesome 提供免費圖示資源，現在又有 「icofont」可以引入 icon 到網頁中了！目前看網路上對它的討論較少，這篇主要會來談談它引入到網頁的方式。
引入方式
- 在官方網站中，找到想要引入的 icon ，點擊 Add to collection，或是直接針對某個類別把全部 icon 都下載也可以，可以參考下方圖片操作。
2. 加入完所有想要使用的 icon 後，到 Collections 裡面點擊下載，這時會得到的檔案結構如下：
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，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
加入 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，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
<ul className="icofont-ul"> <i class="icofont-dart"></i> </ul><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，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
<i class="icofont-add-users icofont-duotone"></i>分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.