CSS字體圖標

字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。 我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。 這就是字體圖標（iconfont).

字體圖標優點

 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..
 但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
 本身體積更小，但攜帶的信息並沒有削減。
 幾乎支持所有的瀏覽器
 移動端設備必備良葯...

字體圖標使用流程

總體來說，字體圖標按照如下流程：

設計字體圖標

假如圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創建 icon圖標， 比如下圖：

之后保存為svg格式，然后給我們前端人員就好了。

其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。

上傳生成字體包

當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。

推薦網站： http://icomoon.io

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://www.iconfont.cn/

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI制作圖標上傳生成。 一個字，免費，免費！！

fontello

http://fontello.com/

在線定制你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX

下載兼容字體包

剛才上傳完畢， 網站會給我們把UI做的svg圖片轉換為我們的字體格式， 然后下載下來就好了

當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了， 直接到剛才的網站上找喜歡的下載使用吧。

 

字體引入到HTML

得到壓縮包之后，最后一步，是最重要的一步了， 就是字體文件已經有了，我們需要引入到我們頁面中。

1. 首先把 以下4個文件放入到 fonts文件夾里面。 通俗的做法

第一步：在樣式里面聲明字體： 告訴別人我們自己定義的字體

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

第二步：給盒子使用字體

 span {
   font-family: "icomoon";
  }

第三步：盒子里面添加結構

 span::before {
   content: "\e900";
  }
 或者  
 <span></span>  

追加新圖標到原來庫里面

如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。