2014-12-18

用 Icon Font 增加網站設計感

有沒有發現阿舍的這個部落格變的比較有設計感呢 ? 有沒有感覺有什麼比較不一樣的地方嗎 ? ... 好,沒發現,沒關係,阿舍就自己說吧 ! 其實,阿舍就是多加了一些小圖示哩 ! 而這些圖示可不是常見的那種圖檔的圖示,而是可用於 CSS 的向量字型,所以,就可以把它拿來像字型一樣,用 CSS 就可以設定大小、顏色、粗體 ... 等等的變化,完全不用透圖型軟體來加工,而且,使用也超容易的哩 ! ....

這些是 Typicons 提供的圖示

阿舍是這陣子在用 Bootstrap 弄個簡單的 Web 機器人遙控界面的時候,發現 Bootstrap 有個叫做 Glyphicons 的東西,本來阿舍還沒搞懂這個 Glyphicons 是怎麼用的,後來,阿舍仔細的看了一下才知道,其實,這個 Glyphicons 就是向量字型的圖示,所以,可以很方便的利用 CSS 來操作哩 !

然後,阿舍覺得 Glyphicons 的圖型雖然還不錯看,但是,比較方正,阿舍沒有很喜歡,所以,阿舍就又去找了一下,就發現有不少的這類型的 Icon Font 可用哩 ! 下面這二套是阿舍比較喜歡,而且,有在用的哩 !

Typicons

Font Awesome

而下面這幾套則是阿舍覺得不錯又免費哩 ! 不過,要提醒一下,雖然,很多這類的 Icon Font 都是免費的,但是,有不少的字型是有要求要在使用的網站上標註字型的授權來源的,像 Glyphicons 的免費版本就有這項要求理,所以,使用前還是要注意一下囉 ...

Sosa

Open iconic (可不標示來源)

The Entypo Pictogram Suite (標示 copyright)

而用法的部份,每一家可能都會有一點點的不同,不過,首先,第一部通常就是要用 link 標籤把它們的 CSS 檔掛到網頁裡 ( 有的字型有提供 CDN 可直接連結,像 Font Awesome 就有提供,有的則是要自己下載後,上傳到自己的網站上,像 Typicons 就是哩 ! )

在網頁連結好各字型的 CSS 檔案後,接下,只要在要放上字型圖示的位置放上各字型所使用的字型和類型名稱就可以了,下面是阿舍有在用的 Glyphicons、Typicons 和 Font Awesome 三種字型的用法,以「首頁連結」加上一個圖示為例 ...

Glyphicons
<a href="/"><span aria-hidden="true" class="glyphicon glyphicon-home"></span></a>

Typicons
<a href="/"><span class="typcn typcn-home"></span> 首頁</a>

Font Awesome
<a href="/"><i class="fa fa-home"></i> 首頁</a>

上面有底線的部份就是每種字型不一樣的地方,而紅色字的部份則是要選擇的圖示的名稱,這個名稱可以從各個字型提供的圖示列表來查的到,通常是在列表上顯示或點選該圖示時會出現名稱的哩 ! ...

阿舍覺得加上這些圖示在網站上也滿好玩的,所以,如果你也覺得你的網站或部落格有點單調的話,就可以照阿舍上面提的方法來試試看,也許,會有煥然一的 Fu 哩 ! ....

註:
1. 如果想找更多好用和有趣的字型的話,用「icon font」關鍵字就可以找到不少哩 ! ...
2. IE 早期版本對於這種 Icon Font 的支援有限,會有無法顯示的問題哩 ! ... 服用前請小心 ...


[+] Ubuntu 指令新手會用到的35個技法 - 這是以阿舍的使用經驗編寫出來的電子書,三天內應該就看的完,學的起來哩 ! 有空就參考一下囉 ! ... ^^=

關於阿舍

好文不藏私,請多分享囉!! ^^=



沒有留言 :

張貼留言

如果留言後,發現留言不見了,這通常是因為 Goolge 把它認為是垃圾留言了,請用信件通知阿舍調整 ( ayubiz@gmail.com )。謝謝 !