Ligature Symbols 超讚的網站圖標應用方式 寫文字直接帶出圖標

關於網站圖標ICON設計

圖標是我們在做網頁設計一定會使用到的設計元素，其實看似簡單的圖標應用，裡頭藏了非常多的豐富學問！舉例來說：某些網站當你使用Chrome或是FireFox的"檢查元素"時，你會看到有些圖標是直接圖片插入式，有些圖標是以背景帶入，然後透過CSS來控制文字與圖片的位置。當然用圖片直接插入是較早期的設計方式，對於現代的標準化來講是不正規的 , 因為這些圖標對於搜尋引擎是沒有意義的，不應該作為圖片插入，正確的方式是要使用第二種方法透過CSS背景帶入。 之後又更一步的衍生出為了減少客戶端對於伺服器端的請求次數，將所有圖標整合進同一個PNG檔案，而設計師透過定位的方式將圖片正確帶出套用在網頁設計上，此方法我們稱作 CSS Sprites 屬於CSS的進階用法。

再進化 Web Symbols

隨著CSS的演進，再將圖標應用帶入新的世代也就是 Web Symbols 的出現，Web Symbols它將圖標轉化成Web Font，讓使用者在套用圖標時，是使用文字去呼叫，例如我需要 Mail 的圖標，我就輸入mail , 它就會透過CSS帶出mail的符號，這種圖標使用方式有以下四點好處：

第一、優於SEO因為它使用有意義文字的文字去呼叫；
第二、它也將全部的圖標包入一個FONT檔案中，載入時間快；
第三、也是 Web Symbols 最大的優點，就是它可以被CSS進行樣式渲染，例如我可以自由為圖標調整大小、顏色...等。
第四、可以有效防止圖標被盜連 ;

Ligature Symbols

Ligature Symbols 就是一款使用了 Web Symbols 概念的圖標樣式，由Kazuyuki Motoyama 所開發，整合了百餘款常用的圖標樣式，大家可以進入官網去查看所有圖標樣式：

Ligature Symbols 官網


Ligature Symbols 的使用方法也很簡單，只需要兩個步驟就可以：
第一、下載ligature_symbols後(官網下載)，先在CSS檔案中載入呼叫語法（如下）：

1. @font-face {
   
2.     font-family: 'LigatureSymbols';
   
3.     src: url('LigatureSymbols-2.11.eot');
   
4.     src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
   
5.          url('LigatureSymbols-2.11.woff') format('woff'),
   
6.          url('LigatureSymbols-2.11.ttf') format('truetype'),
   
7.          url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
   
8.     src: url('LigatureSymbols-2.11.ttf') format('truetype');
   
9.     font-weight: normal;
   
10.     font-style: normal;
    
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. //使用UNICODE時需要在此先定義
    
34. .lsf-icon.amazon:before {　　
    
35.   content: '\E007';
    
36. }

複製代碼

第二、任選使用以下三種帶入方法：
方法範例(1)：使用文字呼叫 (效果僅圖片)

1. <p>Simple use for mailto link.</p>
   
2. <a href="mailto:mail@example.com" class="lsf">mail</a>
   

複製代碼

方法範例(2)：使用TITLE呼叫圖片 (超連結效果會帶圖片與文字)

1. <p>Use tha icon with text.</p>
   
2. <a href="http://twitter.com/" class="lsf-icon" title="ubuntu">ubuntu</a>

複製代碼

方法範例(3)：使用unicode呼叫 (超連結效果會帶圖片與文字)

1. <p>Use tha icon with unicode.</p>
   
2. <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>

複製代碼

範例(1)~(3)效果圖


實際效果可見本工作室範例網頁：http://srpro.org/htmldemo/websymbols/