icomoon 製造字體圖標

icomoon 製造字體圖標

一 製作字體文件

今天爲大家推薦一種非常好用在字體圖標製作方法。使用icomoon製作自己需要的圖標文件。
首先，打開icoMoon網站，選擇自己所需要的圖標，這裏我我選中了10個圖標文件。如下圖。

當然你可以隨意選擇自己喜歡的圖標，也可以上傳自己已經做好的圖標文件，選擇好喜歡的圖標之後點擊Generate Font生成字體，如上圖標註所示。點擊進入後，可以看到自己選擇的圖標展示。如下圖所示。

此外，你也能在做一些自己所需要的配置，如前綴，字體文件名稱，兼容IE6等等。在配置完成之後就可以下載自己做好的字體文件啦。是不是很簡單。

---

二 使用字體文件

將下載的包文件解壓之後可以看到目錄包括如下所示

可以簡單閱讀下Read Me.txt文件。或打開demo.html在瀏覽器中運行，檢查源碼就可以知道使用方式。如何要是用在自己的項目中，可以拷貝fonts目錄可以style.css文件。在自己的項目文件中引入style.css文件，就可以按照字體使用定義的圖標了。如果自己css在另外一個css目錄下，記得一定要更改style.css下面的路徑。

---

附錄下更改的目錄，就是換成當前目錄的上一級目錄。

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