【css】最近使用的兩種圖標字體庫

## 0. 前言

比較基礎的圖標載入：<img src="x.png">和塊元素的背景background: url(./x.png).

頁面多圖標時，使用雪碧圖（多個png壓縮成一個png，定位來使用），減少圖片所占空間。

大屏顯示，為保證圖標清晰度，可以使用svg格式的圖片。svg是矢量圖，直接更改svg代碼中path的fill改變顏色。

可自編輯開源svg庫 [http://www.iconfont.cn/home/index](http://www.iconfont.cn/home/index "阿裡巴巴圖標庫")

圖標字體庫，圖標被生成字體文件，通過class決定圖標，font-size決定大小，color決定顏色。主要使用的是css中偽類：before、css3中的@font-face,因而繼承了font的其他規則。

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}

適用：單色圖標

## 1. Font Awesome

class="fa fa-name fa-size fa-pull-left" 前兩個必有

優點：開箱即用

缺點：擴展麻煩，項目載入過多無用圖標

[http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)

## 2. IcoMoon

class="icon-name"

優點：易於擴展，包括自己團隊做的svg圖標可在官網生成相應的fonts文件

缺點：擴展更新，一旦出現問題，會影響項目其他圖標的顯示

[https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)

## 4. 深度理解

擴展自己的圖標庫

1. 擴展.eot.svg.ttf.woff等相關字體庫

2. 偽類

.icon-name:before {
content: "\f003";
}