圖案文字 - 圖示運用

icon fonts
下標題之前猶豫了一會, FontAwesome主題該描述為圖形文字? 字型? 圖示? 特殊圖形符號?  依照它所呈現的效果應該歸類為圖形; 但實際上它是字型檔案, 而且還是和Google fonts原理類似的網路字型. 例如導覽列的分類選單、首頁連結圖示、檔案類型等等採取圖形代替文字的方式使網站或Blogger視覺上呈現簡潔的設計感, 經常被使用在社群分享按鈕設計. 以往編寫圖示時需要準備圖形網址, 接著在CSS寫入顯示的座標, 這種編輯方式很直觀但是遇上了不同解析度的裝置就可能變形; 除非指定視圖比例. 直接做個首頁連結的範例, 比較容易了解.
圖片連結: 字型連結:

從上例比較, 圖片可以豐富多變可個性化, 但隨著解析度調整容易產生鋸齒或模糊現象, 尤其是小像素圖片更容易看出差異.  而字型的圖示色彩變化少, 優點是, 所有字型可以運用的語意它都能作到, 例如變色、旋轉、陰影、螢光標示等等, PC與Mobile不同解析的表現佳; 甚至在Retina也能顯示細膩的圖形.  大略介紹後最重要的部份當然是如何運用? 熟悉網頁元素的網友請自行至Font Awesome網站研究, 跟我一樣笨笨的網友就留下來看如何在Blogger基本操作. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Twitter',message:'既已加裝在 Blogger, 即應妥善運用. 所以我將圖形字型增修至 jQuery 提示視窗效果裡, 頁面比較生動些. ',buttons:[{id:'btn-ok',label:' WELL DONE !',cssClass:'btn-primary',autospin:false,action:function(dialogRef){dialogRef.close()}}]});});

Step 1. 在Blogger範本 <head> 下方加入一列CSS樣式連結.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
關於這個網頁字型樣式是免費的技術分享, 雖不像Google fonts傳輸這麼快速; 但也同屬於CDN傳輸 (請參考jQuery CDN版本), 只是目前規模小一點點. 下載後又另外上傳取得個人專用的CSS非屬必要; 並不會因此更快, 建議採用FontAwesome的網址. 而且樣式內另有字型檔案連結, 沒有全部修改便無意義.  我想使用者比較擔心的事情在於網站服務很不幸地倒台結束, 這種慘事在網路上經常重現, 所以我們有了習慣性的自備檔案網址. 假設真的那麼衰遇上了! 請至以下備份網址, Google Drive應該還會現役很久.

Fonts Backup

Step 2. 無論是運用在範本內或文章中, 先大致了解使用的語法:
<i class="fa fa-對應值 fa-參數"></i>
其中 "fa" 是預設樣式, 如字型、抗鋸齒, 固定加上去就是了.
對應值我已經製作對照表PDF, 可加入書籤或下載或內嵌至Blogger網頁備查.
class除了表示圖形外, 還有幾種參數可以運用, 在此僅列舉基本款, 詳情參見原文. 其規則為:fa-[圖形]-[形狀]-[鏤空]. 也不用刻意去記住, 找對照表的圖形較方便.
Ex: fa-check (檢查打勾)
fa-check-circle (打勾圓形)
fa-check-circle-o (打勾圓形+鏤空)

參數部份, 例如: fa-fw 自動字距, fa-spin 旋轉, 任何圖形都可以旋轉, Ex:
fa-2x (倍數) 、fa-3x、fa-4x、fa-5x.
例如那個轉得頭好暈的小綠人語法為:
<i class="fa fa-android fa-2x fa-spin fa-fw" style="color:#A4C639"></i>
由於它是字型, 所以可以加大尺寸到滿意.


範本內的操作. 語法的標籤並不限於 <i> 使用 <span>、<p>也能顯示, 同樣的, 它也能在範本內修改操作. 例如:側欄小工具的 <title> 可以使用圖形來取代或是附加上去, 還有許多發揮巧思之處.
例如搜尋工具原本的設定

add font icon

打開範本CSS內找到widget的部份, 找到 <data:title/>


將圖形文字的語法插入, 如下:

blogger圖標設定

儲存後即見效果

Blogger圖示

從Font Awesome下載的檔案中有字型檔, 可以加入電腦內的字型, 雖然打出來的文字不能顯示在網路上, 但可以當作圖形製作的字型工具. 使用Unicode內碼選字, 這是這個文件的另一種用途.