本地目錄：

• 1.iconmoon.io使用教程
• 2.iconfont.cn使用教程
• 3.如何不通過iconfont項(xiàng)目向已有字體圖標(biāo)中添加新的字體圖標(biāo)

1.iconmoon.io使用教程

icomoon是一個(gè)圖標(biāo)很全的字體庫只壳，以下介紹一下使用方法嚼蚀。
1.首先冒签，打開官網(wǎng)https://icomoon.io/
2.點(diǎn)擊右上角的icomoon APP
3.如果需要上傳ui制作的svg文件，則點(diǎn)擊左上角的Import Icons（上傳文件）---->Untitled Set---->點(diǎn)擊即可選擇下載。
如果是下載網(wǎng)站上已有的字體圖標(biāo)，則選項(xiàng)相應(yīng)的字體圖標(biāo)后點(diǎn)擊右下角的Genetate Font---->點(diǎn)擊右下角的Download
4.這時(shí)候我們會(huì)獲得一個(gè)icomoon壓縮文件，解壓后的文件如下：

文件夾.png

@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;
}

然后需要給要使用字體的標(biāo)簽聲明字體和媳，如span

span {
    font-family: "icomoon";
}

最后給這個(gè)標(biāo)簽添加偽元素

span::before {
         content: "\e900";
    }

或者直接在標(biāo)簽中添加<span>?</span>
對(duì)應(yīng)的代碼去demo.html中查找格遭。
第二種方式是通過類樣式使用字體圖標(biāo)
我們需要在項(xiàng)目中引入style.css這個(gè)文件，同時(shí)fonts文件夾也是需要放到style.css能夠引用到的項(xiàng)目文件中留瞳。
接下來在要使用字體的標(biāo)簽上添加“iconmoon icon-xxx”就可以了拒迅，icon-xxx也可以在demo.html文件中查找
5.追加新圖標(biāo)到原來庫里面
如果工作中，原來的字體圖標(biāo)不夠用了她倘，我們需要添加新的字體圖標(biāo)璧微，但是原來的不能刪除，繼續(xù)使用硬梁，此時(shí)我們需要這樣做
把壓縮包里面的selection.json 重新上傳前硫，然后，選中自己想要新的圖標(biāo)荧止，用新下載壓縮包解壓出來的文件屹电，替換掉原來的文件即可。

2.iconfont.cn使用教程

第一步：百度iconfont,找到阿里巴巴矢量圖標(biāo)庫官網(wǎng),然后注冊(cè)登錄,或者用github登錄也行,此步驟不再贅述跃巡。
第二步：找到網(wǎng)頁右上角的圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目
第三步：項(xiàng)目新建完成后,往項(xiàng)目里添加我們要想使用的圖標(biāo),找到圖標(biāo)庫,搜索一個(gè)想要的圖標(biāo),然后添加到購物車
第四步：添加到購物車完成后,購物車徽章數(shù)字應(yīng)該顯示1了,點(diǎn)擊右上角的購物車圖標(biāo),選擇添加至項(xiàng)目,選擇我們剛剛創(chuàng)建的項(xiàng)目,點(diǎn)擊“確定”后頁面會(huì)自動(dòng)跳轉(zhuǎn)到該項(xiàng)目中
第五步：接下來一步比較關(guān)鍵,將打包好的字體文件下載到本地添加到你的項(xiàng)目中,在項(xiàng)目中引用文件中的iconfont.css文件
注意：把下載到本地的文件解壓后全部放在項(xiàng)目的目錄中,再在你的項(xiàng)目中引入iconfont.css文件
如果感覺上面這種方式太麻煩危号，也可以“下方新 icon 來襲，點(diǎn)擊更新代碼素邪，更新后將支持 WOFF2 格式”外莲，生成最新鏈接，然后復(fù)制鏈接進(jìn)行訪問兔朦，將網(wǎng)頁中的代碼復(fù)制到項(xiàng)目中的css文件中偷线。
第六步：如何在項(xiàng)目中使用字體圖標(biāo)呢,其實(shí)很簡單,創(chuàng)建一個(gè)i標(biāo)簽或者span標(biāo)簽,添加兩個(gè)類名,一個(gè)固定的是iconfont,另一個(gè)是你想要的那個(gè)圖標(biāo)對(duì)應(yīng)的類名，如<i class="iconfont icon-anzhuo"></i>
通過元素的font-size屬性可以控制圖標(biāo)的大小烘绽。

3.如何不通過iconfont項(xiàng)目向已有字體圖標(biāo)中添加新的字體圖標(biāo)

今天接到一個(gè)需求淋昭，要往項(xiàng)目中添加一個(gè)字體圖標(biāo)俐填。按照以往的慣例安接，就是在iconfont網(wǎng)站的我的項(xiàng)目添加需要的字體圖標(biāo)就行了。但這個(gè)需求是個(gè)臨時(shí)需求，不想用這種方式盏檐。
于是歇式，就想直接在現(xiàn)有的字體圖標(biāo)中添加。
解決方案
第一步
在iconfont網(wǎng)站找到你需要的字體圖標(biāo)胡野，將其添加到購物車中材失。然后，打開你的購物車硫豆，選擇下載代碼

image.png

image.png

image.png

image.png

image.png

image.png

image.png