傑克! 真是太神奇了!

在網頁中使用 Font Awesome 加一些圖形字元 (icon) 大概很多人都會: 下載 font awesome 提供的壓縮檔 (內含 fonts, CSS ...), 並放到 web server 上, 然後在網頁的前頭加上 <link> tag 來下載就完成了必要的準備工作.

<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />

或者是直接使用 font awesome 提供的 cdn 連結也行.

<link type="text/css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

不過如果你遇到的是像我這樣想把 Font Awesome 當中的2~3個圖形字元的字型塞進 embedded system 裡; 或者, 塞進 PIXNET 的貼文中, 不另外下載字型檔案; 那就得用一些其他技巧了. 下面記錄是我自己應用的步驟:

Step 1: 由 Font Awesome 抽出需要的圖形字元

原本這個步驟有點煩, 不過現在 http://fontello.com/ 這個網站提供了一個方便的介面, 幾個步驟就可以把我們需要的圖形字元的字型抽出來並下載回來. 同時下載回來的壓縮檔裡也提供了字型檔, CSS 檔及必要的說明和樣版, 所以在一般應用上我們就不用再自己手動加工抽出來的圖形字元了.

http://fontello.com/ 的頁面上目前提供了一個操作行, 三個操作子頁籤 (tab) 和一個說明子頁籤. 操作行提供搜尋, 設定 (可以設定點陣字型的大小, 字型名稱...) 及下載的功能操作, 當我們切換子頁籤時操作行是維持不變的. 子頁籤的功能分別是:

• Select Iocns (選擇圖形字元)
  我們主要的操作都在這個子頁籤中, 我們可以在幾個常見的 Web Font 字型檔 (包括: Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols) 中挑選我們需要的 icons, 如果這些字型檔還不夠用, 也可以自行上傳一個自訂的字型檔. 一般狀況下選完 icons 之後, 我們就直接下載即可.
• Customize Names (自訂字元名稱)
  這個子頁籤會列出我們所選擇的 icon 原本的名稱. 如果名稱有衝突 (或者你不喜歡), 你可以在這個子頁籤進行修改.
• Customize Codes (自訂字元編碼)
  這個子頁籤會列出我們所選擇的 icon 原本的 unicode, 如果 unicode 有衝突 (或者你不喜歡), 你可以在這個子頁籤進行修改.
• Help / Wiki
  這個子頁籤提供的是操作說明 (連結到 github 上).

http://fontello.com 的Select Iocns子頁籤

http://fontello.com 的Customize Names及Customize Codes子頁籤

解開下載回來的檔案, 我們可以看到css及font二個子目錄, 及以demo.html, config.json, LICENSE.txt及README.txt等四個檔案. 初次使用的人把README.txt細讀一下應該就會用了.

Step 2A: 修改 CSS 設定, 附加字元的字型 (woff 及 truetype)

找到css/fontello-embedded.css, 把第二段的@font-face拷貝出來 (如下面程式段落所示), 貼在你自己的 CSS 中, 或者是部落格貼文. (依據字元字型的數量以及字元圖形的複雜程度, 第 3 行及第 4 行可能會非常的長, 一般我會把這一段貼在 CSS 檔的最前面).

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,...') format('woff'),
       url('data:application/octet-stream;base64,...') format('truetype');
}

Step 2B: 修改 CSS 設定, 附加字元的字型 (SVG)

Sorry, 之前這一段所寫的東西是錯的, 所以刪掉了 (冏...). 目前 IE 和 Chrome 在只使用 SVG 的情況下都是無法顯示該字型, 之前可以看到是因為 client 端 cache 其他格式的字型, 而切換模式之後沒有先把 cache 先清除一次再查看網頁, 所以也就以為成功了, 抱歉.

Step 3: 修改 CSS 設定, 附加必要的 CSS

你所選擇的這些符號的 unicode 編碼可以在css/fontello-embedded.css的後半段找到. 例如我由 http://fontello.com/ 操作, 選擇下載了三個符號, 下載的css/fontello-embedded.css檔案中最後面三行所列出來的符號 unicode 如下: (其中的 '\e800', '\f08e', '\f0ed' 就是我們需要的 unicode)

.icon-download:before { content: '\e800'; }
.icon-link-ext:before { content: '\f08e'; }
.icon-download-cloud:before { content: '\f0ed'; }

像本貼文我要展示給大家看的是在<a> (anchor tag) 之後附加一個下載的符號, 於是我就在文章中附加了下面 4 個 CSS 設定: 第一個 CSS 設定 pseudo element ::after的字型, 後面 3 個則依不同的 css class name 附加不同的符號. 以下是我附在貼文中的 CSS:

<style>
.article-content-inner a::after {
font-family:'fontello'
}
.article-content-inner a.extern::after {
content:" \f08e"
}
.article-content-inner a.dnld::after {
content:" \e800"
}
.article-content-inner a.dnld-cloud::after {
content:" \f0ed"
}
</style>

Step 4: 修改 HTML 檔

然後我們就可以直接修改需要附加字型的地方, 加上其中一個 classname 即可.

<a class='extern' href=#>Test1</a>
<a class='dnld' href=#>Test2</a>
<a class='dnld-cloud' href=#>Test3</a>

結果如下列三行所示:

Test1

Test2

Test3

結果的圖檔如下

附註

• 其實如果頁面有中文的罕見字也可以依樣畫葫蘆_(註一): 把中文造字給附在網頁的 CSS 上. 這樣就不必擔心讀者沒有我們自己造的字型檔, 或者沒有下載安裝我們所使用的造字檔了.

註一: 當然你必需要先有罕見字的造字檔 (最好是 SVG 版本的)>, 有了罕見字的字型之後真的就是依樣畫葫蘆. 至於輸入罕見字則是另一個課題, 不過至少直接輸入 unicode 是 OK 沒問題的啦!

• 使用 iPhone 的內建 browser safari 的人要注意一下, 如果你看不到這類字型的字元, 可以卸載 safari APP 之後, 再重新開啟 safari APP, 如果還是不行則手機必需要 重新開機 才會正常. 用 Google Chrome 則不會有這個現象.