Icon Fonts 教學

什麼是 Icon Fonts?

以往我們都是將小圖示(icon)用切圖的方式放入網頁,而我們也可以將這些 icon 用 CSS「畫」出來。

Icon Fonts 的優點

唯一的缺點就是只能使用單色

開始使用 Icon Fonts…

先來看完成畫面…

開始使用 Icon Fonts...

我們使用的是 Ligature kudakurage Symbols,官方網頁下載

檔案準備,準備一個 HTML 檔案(範例),準備一個 font-face.css 檔案(範例),下載的檔案解壓縮後,將 LigatureSymbols-2.11.eot、LigatureSymbols-2.11.otf、LigatureSymbols-2.11.svg、LigatureSymbols-2.11.ttf、LigatureSymbols-2.11.woff 放到與 font-face.css 同一層的資料夾,如下圖示。第一層資料夾放 Demo 用的 html 檔(即 HTML 範例檔案)。

檔案準備

第二層資料夾 skin 放 css 檔與解壓縮後的檔案。

第二層資料夾 skin 放 css 檔與解壓縮後的檔案

打開 demo.html 檔案後即可看到畫面。在 span 上加上指令 text-shadow: 2px 2px #14CC7C; 即可有陰影的效果。改變 color 即可改變 icon 顏色,在此使用綠色。

打開 demo.html 檔案後即可看到畫面

使用「<span class = "lsf-icon" title="名稱"></span>」(size 較大)或「<span class="lsf">名稱</span>」(size 較小)即可指定使用的 icon。

如何自製 Icon Fonts?

準備檔案:使用 illustrator 製作 100*100 的 icon。完成後,存檔:檔案 -> 儲存成網頁裝置。格式設為 SVG,版本為 SVG Tiny 1.2。

準備檔案

使用 icomoon

icomoon

按下 import 上傳剛剛做好的 svg 檔案。

按下 import 上傳剛剛做好的 svg 檔案

可做修改。

修改 icon

按下方的 Font 來下載,下載後會得到一個壓縮檔。解壓縮後開啟資料夾裡面的 index.html,就會看到製作好的 icon fonts,如下圖。

下載 icon

使用方式如前面所述,可用 class 或 data attribute 的方式。例如:<span aria-hidden="true" class="icon-demo"></span><div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div>

後記

(2018/08/17 更新)

Inline SVG vs Icon Fonts

小圖示到底要使用 SVG 還是 Icon Fonts 比較好呢?這裡有一篇文章提供參考,結論就是 SVG 完勝 (ノ>ω<)ノ

兩者比較結果,節錄重點如下…

若需求和環境允許(IE 9+ / Android 3+),使用 SVG 的確是目前最好的選擇 d(`・∀・)b


這篇文章的原始位置在這裡-Icon Fonts Tutorial

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus