圖片連結：
字型連結： 從上例比較, 圖片可以豐富多變可個性化, 但隨著解析度調整容易產生鋸齒或模糊現象, 尤其是小像素圖片更容易看出差異. 而字型的圖示色彩變化少, 優點是, 所有字型可以運用的語意它都能作到, 例如變色、旋轉、陰影、螢光標示等等, 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內碼選字, 這是這個文件的另一種用途.
Author Summary
Subject : 圖案文字 - 圖示運用
Author : - Dream Talker Updated at: 6:37 AM
Votes : - 5.0 - based on 2015
FontAwesome網路字型圖標
Author : - Dream Talker Updated at: 6:37 AM
Votes : - 5.0 - based on 2015
FontAwesome網路字型圖標
5 Stars - Reviews
需要加入jQuery程式碼嗎?
ReplyDelete它是純CSS, 不用加jQuery程式庫插件. 但如果是運用到jQuery效果, 例如將圖形組合成HTML5播放媒體, 就可以使用javasrcipt設計成播放器. 又例如設計成訪客註冊的界面等等運用.
Delete又學到一項技巧，這次的很容易上手，謝啦！
ReplyDelete應該感謝原作者與服務網站的分享, 希望對您有所助益. :)
Delete拿來用,謝了!
ReplyDeleteYou are welcome!
Delete太實用了!!我正請教你的網站各處裡面的圖案怎麼做的,搜尋後真有教學,大感恩!!
ReplyDelete請問一下,如Step 1所說,意思是可以下載放到google雲端來連嗎??那放在head後面的語法是否要改變??該如何改變??謝謝您,麻煩解惑^^
Delete如果要使用自己的 css 連結，把 link 裡面的連結修改即可。不過我不建議使用自己的連結，因為它原本的樣式連結採用 CDN 的方式，絕對會比使用個人的雲端檔案更快。
Delete我沒有更新文章，Font Awesome 已經更新為 4.2.0 版本了，請修改版本編號。
FB 我只有拿來當作 Blogger 留言插件，沒有使用其他社群作用喔！XD
是直接把link裡面的4.0.3換成4.2.0就可以了嗎？
Delete你說的fb是指我白天加你好友嗎？好的瞭解
是的，直接換編號就好。link 放在 </head> 之前，讓其他版型樣式先載入比較重要。
Delete更換完成!!謝謝你的說明喔!
Delete不用客氣 :) 剛才去你家看還沒有開始使用，卻發現了一個情形，「數髮部落」裡面有兩支 jQuery 版本分佈在範本跟不同懶人包程式碼裡面。留下一支最新版本即可，請修改一下編號以免重複載入類似函式庫。
Delete再請教一個問題屬性的部份除了您文中所說的"fa-fw 自動字距, fa-spin 旋轉"外，還有其他效果嗎？？謝謝你
ReplyDelete請參考原作的 示範頁面
Delete或是另外加掛動畫進階版的特殊函式插件， DEMO 介紹
好的!!再次感謝喔!!^^原來還有另外其他的插件可用啊!
Delete