圖案文字 - 圖示運用
圖片連結：
字型連結： 從上例比較, 圖片可以豐富多變可個性化, 但隨著解析度調整容易產生鋸齒或模糊現象, 尤其是小像素圖片更容易看出差異. 而字型的圖示色彩變化少, 優點是, 所有字型可以運用的語意它都能作到, 例如變色、旋轉、陰影、螢光標示等等, 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應該還會現役很久.
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> 可以使用圖形來取代或是附加上去, 還有許多發揮巧思之處.
例如搜尋工具原本的設定
打開範本CSS內找到widget的部份, 找到 <data:title/>
將圖形文字的語法插入, 如下：
儲存後即見效果
從Font Awesome下載的檔案中有字型檔, 可以加入電腦內的字型, 雖然打出來的文字不能顯示在網路上, 但可以當作圖形製作的字型工具. 使用Unicode內碼選字, 這是這個文件的另一種用途.
