Icon Fonts 教學

08 Oct 2013

什麼是 Icon Fonts？

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

Icon Fonts 的優點

減少圖片即可減少 http requests。
改變 font size 即可改變 icon 大小，不必為了需要多種尺寸而切不同大小的圖，適用於 responsive design。
即使 icon 放大也不會出現解析度不夠的問題。
改變 icon 顏色容易，只需改變 color 即可。
可任意加上效果，例如 hover（加上 hover）、陰影（使用 text-shadow 指令）等，圖片可做到的事情幾乎 icon fonts 皆可做到。
檔案大小較小（CSS 檔案比圖片檔案來得小）。

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

開始使用 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 製作 100x100 的 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=""></div>。

後記

（2018/08/17 更新）

Inline SVG vs Icon Fonts

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

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

清晰度：字體的 font-smoothing 基本上會設定為 auto 或 antialiased，因此字體會變得平滑無鋸齒，造成 Icon Fonts 看起來沒這麼銳利；而 SVG 則是永遠都清晰。
樣式：Icon Fonts 只能單色，SVG 是彩色的！
定位：由於 Icon Fonts 是透過偽類別插入的，因此可能會受到 line-height、vertical-align、letter-spacing、word-spacing 等字型相關的樣式影響；而 SVG 是一張圖，控制這個元素即可，狀況比較單純。
Icon Fonts 在載入時可能會因為是跨網域資源請求但未正確設定 CORS 而失效。
Icon Fonts 可能會因為瀏覽器不支援或跳過 @font-face 而導致無法正確顯示，另外還有覆寫問題；而 SVG 只要瀏覽器支援，就會正常顯示。
語義化：Icon Fonts 由於是利用偽類別插入，因此無法使用任何語義化標籤，最多就是利用常用的空 <span> 所使用的偽元素來設定 title 屬性才能表達「這是圖片」的含義和一些輔助說明；而 <svg> 這個標籤就是圖片的意思。
無障礙：Icon Fonts 所使用的偽元素必須設定 arial-hidden 來避免被機器朗讀；SVG 對此並無異狀，並且 SVG 圖檔內還能透過 <title>、<desc> 和 aria-labelledby 提供輔助說明。
製作的難易度：Icon Fonts 的製作必須使用特殊工具，而 SVG 簡單使用記事本即可。
瀏覽器支援度：Icon Fonts 連 IE6 都有支援，SVG 在 IE8 或 Android 2.3- 有較多問題，但可使用應變方式。