css字體圖標的制作和使用。

在項目開發的過程中，我們會經常用到一些圖標。但是我們在使用這些圖標時，往往會遇到失真的情況，而且圖片數量很多的話，頁面加載就越慢。所以，我們可以使用字體圖標的方式來顯示圖標，既解決了失真的問題，也解決了圖片占用資源的問題。

一：如何制作字體圖標

1：上網下載需要的圖標（svg格式）,在這里推薦一個網站 "阿里巴巴圖標庫",這里面幾乎囊括了網站制作中所有需要的圖標，而且是免費下載，（格式，大小，顏色都可以自定義）。

2：我們打開“iconmoon”這個網站（當然阿里巴巴圖標庫這個網站也可以制作），找到右上角這個紅色的按鈕，點擊它。

3：找到左上角這個按鈕，點擊import icons這個按鈕，上傳你的svg格式的圖標。

4：當圖標上傳完后，圖標的背景是灰色的，這個時候點擊你需要的圖標（選中后的背景會變白）。

5：點擊頁面右下角的這個按鈕，跳轉頁面后，再點擊這個下載按鈕，等待下載完成。

 

二：如何使用字體圖標

1：解壓下載后的文件夾，我們需要的是fonts文件夾和style.css, 將這個文件放入你的項目中,style.css文件中引入了字體文件，所以會有路徑，這個時候你在使用的時候要注意路徑問題，代碼如下：（這里的多種字體文件是為了兼容瀏覽器）

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

2：在頁面中，我們只要給一個元素添加相應的類名就行，因為在style.css中已經將類名對應的圖標寫好了。

.icon-account:before {
  content: "\e900";
}
.icon-caifu:before {
  content: "\e901";
}
.icon-edit:before {
  content: "\e902";
}

　頁面中添加如下類似元素：

<span class="icon-account"></span>

　這樣，我們的頁面中就可以顯示相應的圖標了。

 注意：在某些小米手機上可能有些圖標不會顯示：：

 

 

二：使用阿里的iconfont：

1:找到網站，搜索需要的圖標

2:將圖片加入購物車，點擊頁面右上角的購物車按鈕，將所有圖標添加到自定義項目中。

3：在彈出的頁面中，點擊下載至本地。