2012年12月10日 星期一

Ligature Symbols- 好用的Web icon font

l1
一般網站開發者,常常會需要用到一些小圖示,不過自己畫麻煩,加上其實大多的圖示為了要能表達一樣的意思,形狀並不會差太多,於是就有類似Ligature Symbols的技術,可以讓你輕鬆在網站裡加入小圖示,加上因為他是文字的格式,你只要設定font-size就可以調整大小,很方便,可以來試試看。

網站:Ligature Symbols

連到網站可以看到許多圖示,他都是文字的格式。
l2

首先下載網站上的附件,然後可以參考他的html,基本上有三種格式。

<p>Simple use for mailto link.</p>
<a href="mailto:[email protected]" class="lsf">mail</a>
<p>Use tha icon with text.</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>
<p>Use tha icon with unicode.</p>
<a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>


第一種是只有圖示,第二種則是文字加圖示,第三種則是Unicode的格式。

然後在網頁上加上如下的CSS
  1. @font-face {   
  2.     font-family'LigatureSymbols';   
  3.     srcurl('LigatureSymbols-2.09.eot');   
  4.     srcurl('LigatureSymbols-2.09.eot?#iefix'format('embedded-opentype'),   
  5.          url('LigatureSymbols-2.09.woff'format('woff'),   
  6.          url('LigatureSymbols-2.09.ttf'format('truetype'),   
  7.          url('LigatureSymbols-2.09.svg#LigatureSymbols'format('svg');   
  8.     srcurl('LigatureSymbols-2.09.ttf'format('truetype');   
  9.     font-weightnormal;   
  10.     font-stylenormal;   
  11. }   
  12.   
  13. .lsf, .lsf-icon:before {   
  14.   font-family'LigatureSymbols';   
  15.   -webkit-text-rendering: optimizeLegibility;   
  16.   -moz-text-rendering: optimizeLegibility;   
  17.   -ms-text-rendering: optimizeLegibility;   
  18.   -o-text-rendering: optimizeLegibility;   
  19.   text-rendering: optimizeLegibility;   
  20.   -webkit-font-smoothing: antialiased;   
  21.   -moz-font-smoothing: antialiased;   
  22.   -ms-font-smoothing: antialiased;   
  23.   -o-font-smoothing: antialiased;   
  24.   font-smoothing: antialiased;   
  25. }   
  26.   
  27. .lsf-icon:before {   
  28.   content:attr(title);   
  29.   margin-right:0.3em;   
  30.   font-size:130%;   
  31. }   
  32.   
  33. .lsf-icon.amazon:before {   
  34.   content'\E007';   
  35. }  

這樣就可以看到你的文字變成圖示了,可以對照網站上支援的文字圖示,藉由替換文字內容更改圖示,另外也可以藉由更改DOM的顏色跟大小來自定圖示。

l3
像我這個就是把a設為暗紅色,沒有連結的就用span,就會有如上圖的效果。

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...