網頁的免費圖示資源又多了一個選擇，一起試試看 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，之前也有寫過其他網頁圖示資源的相關文章，歡迎一起閱讀。
為什麼會看到廣告
留言0
查看全部
傑米的沙龍 的其他內容
你可能也想看
免費網頁設計平台的全面分析隨著網路科技的快速發展，越來越多的個人和企業希望擁有自己的網站。免費網頁設計平台為這些用戶提供了便捷的解決方案，讓他們能夠輕鬆地建立和管理自己的網站。然而，面對眾多免費網頁設計平台，如何選擇最適合自己需求的平台呢？本文將對熱門的免費網頁設計平台進行全面評比，並提供選擇建議。
2023-07-05
成為專業的Youtuber提升網頁觸及率Youtube近年來市佔率不斷上升，越來越多人有觀看Youtube的習慣，由於Youtube是Google旗下的網站，所以兩者之間有高度聯動性。搜尋結果第一頁上通常都會有相關主題影片的連結。如果你的網頁未能排上搜尋結果首頁，不妨嘗試製作影片，除了能增加品牌觸及率，還有機會把流量帶至網頁。
2023-05-05
手機應用程式和響應式網頁的兩大分別手機用戶的市場不斷擴大，使用人數不斷上升，因此手機版界面的重要性越來越高。現時網頁設計公司大多都有提供支援手機版的網頁設計服務或是製作手機應用程式的服務，選擇服務之前首先要了解他們的定義和分別，這篇文章會簡單介紹兩者的分別。
2023-04-17
手機網頁的倒數計時很多網站，都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術，叫做 Responsive web design (RWD)。
2022-11-21
網店創業必知的三大免費線上宣傳方法 (完整教學)新手開始開創網上商店，準備好品牌產品或服務之後，一般大家的下一步就是需要去宣傳並且將品牌推出市面。但是當宣傳資金預算有限的時候，除了投放Facebook廣告，Google關鍵字之外，我們還有哪些免費宣傳/低成本推廣的方法嗎？此三大最簡單而且零成本的宣傳手法由網店狂人Nick Lau提供，逐步教你如何
2022-05-29
要如何增加商品網頁的購買轉換率？
好不容易把客人招攬到店裡來了，那要如何讓他買單呢？其實網路購物跟實體商店的消費者心理是大同小異的；不外乎是兩個重要的因素：
良好的購物體驗
刺激消費衝動
試著想想，當我們走進高級精品店時，店員是不是在你一進門，就很親切地打聲招呼，然後請你坐在舒服的沙發上，詢問需不需要飲料或小點心，並遞上
2021-08-02
【自學程式】如何設定網頁的背景圖片？多層次背景圖、漸層背景教學在初學網頁排版的時候，文字、段落、列表的排版可以說是比較好上手的，只要稍微透過margin、padding、border及文字顏色上調整，就可以輕易獲得一段美美的文字。
然而要去調整圖片的大小及其他相關效果，就不是那麼容易的一件事了，往往在開發時，都會出現圖片效果不如自己預期的狀況。
2021-07-11
靠免費商業模式，擠身最賺錢的網路公司－Google艾兒莎上次談到免費這樣的商業模式，並且提了中國奇虎360用免費的防毒軟體，做到在美國上市。各位艾寶一定知道，每天都在用的google搜尋，也是免費的，這篇就來梳理google商業模式的來龍去脈。
2019-01-28
被遺忘的免費網頁殭屍遊戲《The Last Stand》今年是殭屍主題免費網頁遊戲《The Last Stand》（TLS）系列第一作發布的 10 周年。
2017-12-08
2016-06-19