網頁的免費圖示資源又多了一個選擇，一起試試看 icofont 吧！
閱讀時間約 5 分鐘
除了常見的 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，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
數位設計中，圖示已成為不可或缺的一部分。然而，市面上普遍以靜態圖示為主，動態圖示較少被提及。其實，恰當運用動態圖示，無論在資料整理或數據視覺化上，都能顯著提升設計作品的互動性和美觀度。因此，今天要和大家分享一個超過 100 種動態圖示的網站—Unicorn Icons，為大家提供更多素材選擇和應用。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
Notion 的 icon 功能提供了豐富的顏文字跟icon圖示可以使用，
但在正式文件或網頁發布時用顏文字有點不恰當，
icon的顏色的選擇又只有十種，這時候可能會想要用自己上傳的logo檔案
要如何簡單的讓頁面更加豐富呢？
除了頁面 Page 以外，
還有
想搞設計，卻沒有靈感嗎？以下提供７個提供高質量Adobe Illustrator模板的網站：
想要讓你的設計作品更添風采嗎？不論是專業設計師或是文字愛好者，一款適合的字體都能立即提升視覺吸引力。但哪些中文體既免費又好看，適合你的下一個項目？我們精選了18款設計師常用的免費中文字型，絕對可以幫助你在眾多選擇中脫穎而出，點進來看看吧！
【設計素材】Google Fonts Icons
這個網站是 Google Fonts 的「Icons」頁面，提供了免費的字型，其中的 Material Symbols 圖示字型，這組字型收錄了超過三千個圖示 icon。在這組圖示中，還提供了多款可調整的樣式，包含了不同粗細組合，您可以直接
在這個視覺導向的數位時代，有吸引力的圖標不僅能夠增強用戶體驗，還能夠在提供信息的同時帶來美學的享受。無論是網頁設計、App開發還是內容創造，都需要一套完善的圖標庫來使他們的作品更加出色。以下是六個值得一探的優質圖標網站，它們以其豐富的圖庫和出色的設計而著稱。
免費素材有哪些？為你準備好了免費素材懶人包！17 個素材網，免費向量圖、Icons圖库任選，讓你一鍵點擊即用！還為你整理好了免費素材標籤含義和圖庫使用注意事項，讓你不再擔心商用素材問題。快來看看哪些素材能讓自己的網站內容創作和設計更加高質量吧！
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
數位設計中，圖示已成為不可或缺的一部分。然而，市面上普遍以靜態圖示為主，動態圖示較少被提及。其實，恰當運用動態圖示，無論在資料整理或數據視覺化上，都能顯著提升設計作品的互動性和美觀度。因此，今天要和大家分享一個超過 100 種動態圖示的網站—Unicorn Icons，為大家提供更多素材選擇和應用。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
Notion 的 icon 功能提供了豐富的顏文字跟icon圖示可以使用，
但在正式文件或網頁發布時用顏文字有點不恰當，
icon的顏色的選擇又只有十種，這時候可能會想要用自己上傳的logo檔案
要如何簡單的讓頁面更加豐富呢？
除了頁面 Page 以外，
還有
想搞設計，卻沒有靈感嗎？以下提供７個提供高質量Adobe Illustrator模板的網站：
想要讓你的設計作品更添風采嗎？不論是專業設計師或是文字愛好者，一款適合的字體都能立即提升視覺吸引力。但哪些中文體既免費又好看，適合你的下一個項目？我們精選了18款設計師常用的免費中文字型，絕對可以幫助你在眾多選擇中脫穎而出，點進來看看吧！
【設計素材】Google Fonts Icons
這個網站是 Google Fonts 的「Icons」頁面，提供了免費的字型，其中的 Material Symbols 圖示字型，這組字型收錄了超過三千個圖示 icon。在這組圖示中，還提供了多款可調整的樣式，包含了不同粗細組合，您可以直接
在這個視覺導向的數位時代，有吸引力的圖標不僅能夠增強用戶體驗，還能夠在提供信息的同時帶來美學的享受。無論是網頁設計、App開發還是內容創造，都需要一套完善的圖標庫來使他們的作品更加出色。以下是六個值得一探的優質圖標網站，它們以其豐富的圖庫和出色的設計而著稱。
免費素材有哪些？為你準備好了免費素材懶人包！17 個素材網，免費向量圖、Icons圖库任選，讓你一鍵點擊即用！還為你整理好了免費素材標籤含義和圖庫使用注意事項，讓你不再擔心商用素材問題。快來看看哪些素材能讓自己的網站內容創作和設計更加高質量吧！
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。