超詳細的字體圖標的製做與使用——icomoon的使用及字體圖標的追加

一. icomoon的使用

1. icomoon的網站： icomoon.io/

2. 進入網站後點擊右上角icoMoon App

3. 點擊左上角的import icons導入本地的svg文件（也能夠直接選擇該網站現有的svg）

選擇本地svg

選擇須要的svg

而後就能夠點擊右下角的Generate font，進入配置網頁

4. 下載到本地後能夠發現如下目錄，將fonts和style.css目錄導入本身的項目中

如：fonts目錄導入項目的common/fonts下

style.css導入項目的common/stylus，因爲我項目是用stylus，因此把styly.css修改爲stylus代碼變成icon.styl， 可根據自身狀況而定

5. 在html css中引用

該圖是style.css中的類名

// 類名是style.css文件中給定的類名
// .html
<span class="icon-close"></span>

// .css
.icon-close{
    font-size: 16px
    color: #000
}
    
複製代碼

二. 如何追加新的字體圖標

咱們在作項目的時候，常常會在後期想添加新的字體圖標，方法有兩種：

1. 當有第一次製做字體圖標下載後生成的.json文件時

1.1 這個比較簡單，直接進入icomoon網站-->icoMoon App --> import icons --> 選擇第一次生成的.json文件 --> 原先的字體圖標出現 --> import icons --> 選擇新.svg文件 --> ...（接下來就跟從新制做字體圖標差很少，就不過多說）

2. 當咱們是團隊開發項目，沒有一開始的.json文件時

2.1 直接進入icomoon網站-->icoMoon App --> import icons --> 選擇新的.svg文件--> Generate font --> 點進左上角的preferences修改文件名（好比第一次個人文件名是icon-music，爲了防止重複我把此次的文件名改爲icon-music1）--> 下載 --> 複製fonts目錄下的文件導入項目common/fonts

2.2 重點來了！！！！

將新的style.css部分代碼（見下圖）

複製到一開始在項目中的style.css（我是icon.styl）

須要把新的代碼中的font-family: 'music-icon1'改爲'music-icon'來跟起初的代碼統一，修改後：

如今你去引用新的字體圖標(icon-music-logo)會發現生效了！！！