圖案文字 - 圖示運用

16   Comments

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內碼選字, 這是這個文件的另一種用途.


Author Summary
圖案文字 - 圖示運用
Subject : 圖案文字 - 圖示運用
Author : - Dream Talker Updated at: 6:37 AM
Votes : 100% - 5.0 - based on 2015
FontAwesome網路字型圖標
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 需要加入jQuery程式碼嗎?

    ReplyDelete
    Replies
    1. 它是純CSS, 不用加jQuery程式庫插件. 但如果是運用到jQuery效果, 例如將圖形組合成HTML5播放媒體, 就可以使用javasrcipt設計成播放器. 又例如設計成訪客註冊的界面等等運用.

      Delete
  2. 又學到一項技巧,這次的很容易上手,謝啦!

    ReplyDelete
    Replies
    1. 應該感謝原作者與服務網站的分享, 希望對您有所助益. :)

      Delete
  3. Anonymous1:08 AM

    拿來用,謝了!

    ReplyDelete
  4. 太實用了!!我正請教你的網站各處裡面的圖案怎麼做的,搜尋後真有教學,大感恩!!

    ReplyDelete
    Replies
    1. 請問一下,如Step 1所說,意思是可以下載放到google雲端來連嗎??那放在head後面的語法是否要改變??該如何改變??謝謝您,麻煩解惑^^

      Delete
    2. 如果要使用自己的 css 連結,把 link 裡面的連結修改即可。不過我不建議使用自己的連結,因為它原本的樣式連結採用 CDN 的方式,絕對會比使用個人的雲端檔案更快。

      我沒有更新文章,Font Awesome 已經更新為 4.2.0 版本了,請修改版本編號。
      FB 我只有拿來當作 Blogger 留言插件,沒有使用其他社群作用喔!XD

      Delete
    3. 是直接把link裡面的4.0.3換成4.2.0就可以了嗎?
      你說的fb是指我白天加你好友嗎?好的瞭解

      Delete
    4. 是的,直接換編號就好。link 放在 </head> 之前,讓其他版型樣式先載入比較重要。

      Delete
    5. 更換完成!!謝謝你的說明喔!

      Delete
    6. 不用客氣 :) 剛才去你家看還沒有開始使用,卻發現了一個情形,「數髮部落」裡面有兩支 jQuery 版本分佈在範本跟不同懶人包程式碼裡面。留下一支最新版本即可,請修改一下編號以免重複載入類似函式庫。

      Delete
  5. 再請教一個問題屬性的部份除了您文中所說的"fa-fw 自動字距, fa-spin 旋轉"外,還有其他效果嗎??謝謝你

    ReplyDelete
    Replies
    1. 請參考原作的 示範頁面
      或是另外加掛動畫進階版的特殊函式插件, DEMO 介紹

      Delete
    2. 好的!!再次感謝喔!!^^原來還有另外其他的插件可用啊!

      Delete