網頁的免費圖示資源又多了一個選擇,一起試試看 icofont 吧!

更新 發佈閱讀 5 分鐘

除了常見的 Material Icons 和 Font Awesome 提供免費圖示資源,現在又有 「icofont」可以引入 icon 到網頁中了!目前看網路上對它的討論較少,這篇主要會來談談它引入到網頁的方式。

引入方式

  1. 官方網站中,找到想要引入的 icon ,點擊 Add to collection,或是直接針對某個類別把全部 icon 都下載也可以,可以參考下方圖片操作。
raw-image

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

  1. 參考它是怎麼引入 icon,像是查看 icon 的 class 名稱有沒有缺少,比如說 Duotone 類別的 icon 就要額外加上一個 class 想當初一直引入失敗就是卡在這裡可惡
  2. 也有可能一開始並沒有加入這個 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 對應的尺寸表,供大家參考

raw-image

使用 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,之前也有寫過其他網頁圖示資源的相關文章,歡迎一起閱讀。



留言
avatar-img
留言分享你的想法!
avatar-img
傑米的沙龍
7會員
30內容數
正在一點一滴學習程式,相信知識量總有一天會匯聚成大海,目前專門研究前端中。
你可能也想看
Thumbnail
這篇主要會透過 CDN 引入 Material Icons,並補足官方文件裡只有提到 Filled 類別的引用方式,但沒有提到其他類別,像是 Outlined、Rounded、Sharp、Two tone,另外還會提到如何透過偽元素加入 Material Icons,現在我們就來看看如何引入吧!
Thumbnail
這篇主要會透過 CDN 引入 Material Icons,並補足官方文件裡只有提到 Filled 類別的引用方式,但沒有提到其他類別,像是 Outlined、Rounded、Sharp、Two tone,另外還會提到如何透過偽元素加入 Material Icons,現在我們就來看看如何引入吧!
Thumbnail
網頁中經常需要引入外部資源,其中字型更是不可或缺,好看的字體會為網頁質感大加分,免費的網頁字型資源以 Google Fonts 最為常見,今天就來使用 Codepen 試看看如何引入字型吧。
Thumbnail
網頁中經常需要引入外部資源,其中字型更是不可或缺,好看的字體會為網頁質感大加分,免費的網頁字型資源以 Google Fonts 最為常見,今天就來使用 Codepen 試看看如何引入字型吧。
Thumbnail
除了常見的 Material Icons 和 Font Awesome 提供免費圖示資源,現在又有 「icofont」可以引入 icon 到網頁中了!目前看網路上對它的討論較少,這篇主要會來談談它引入到網頁的方式。
Thumbnail
除了常見的 Material Icons 和 Font Awesome 提供免費圖示資源,現在又有 「icofont」可以引入 icon 到網頁中了!目前看網路上對它的討論較少,這篇主要會來談談它引入到網頁的方式。
Thumbnail
以往寫網頁經常使用到 Google Fonts 裡的 Material Icons 服務,但大多都是直接引入預設設定,最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已,仔細看了官方文件之後,才發現原來還有一些設定可以做調整,使用上更加彈性,因此寫了這篇文章記錄下來。
Thumbnail
以往寫網頁經常使用到 Google Fonts 裡的 Material Icons 服務,但大多都是直接引入預設設定,最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已,仔細看了官方文件之後,才發現原來還有一些設定可以做調整,使用上更加彈性,因此寫了這篇文章記錄下來。
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們可以更好地整理和管理自己的筆記和安排。然而,當我們使用 Notion 時,有時想要使用不同的圖示來標記不同的項目,但 Notion 內建的圖示已經用過一輪,想要找更貼切的符號卻不易。因此,我們將推薦四個網站,可以讓你能替換不同的圖示。
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們可以更好地整理和管理自己的筆記和安排。然而,當我們使用 Notion 時,有時想要使用不同的圖示來標記不同的項目,但 Notion 內建的圖示已經用過一輪,想要找更貼切的符號卻不易。因此,我們將推薦四個網站,可以讓你能替換不同的圖示。
Thumbnail
「你是否覺得電腦的那些固定字體已經看膩了呢?」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢?」 那麼今天要來介紹一下,如何在網路上安裝其他的字體,以及介紹幾種安裝字體的網站唷~
Thumbnail
「你是否覺得電腦的那些固定字體已經看膩了呢?」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢?」 那麼今天要來介紹一下,如何在網路上安裝其他的字體,以及介紹幾種安裝字體的網站唷~
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News