如何制作icon-font小圖標(biāo)

yexiaobai 發(fā)布于2019-08-01 17:32 / 696人閱讀

摘要：首先可以去阿里巴巴矢量字體庫中下載你想要的圖標(biāo)選擇格式為格式。打開這個(gè)網(wǎng)站這個(gè)樣子的，然后點(diǎn)擊右上角那個(gè)如下圖上面有一個(gè)紫色的點(diǎn)擊上傳你下好的圖標(biāo)。鼠標(biāo)箭頭表示選擇圖標(biāo)。垃圾桶表示刪除圖標(biāo)，一般選擇垃圾桶，點(diǎn)一下圖標(biāo)就可刪除。

1、首先可以去iconfont.cn阿里巴巴矢量字體庫中下載你想要的圖標(biāo)（選擇格式為SNG
格式）。

2、打開iconmoon這個(gè)網(wǎng)站（這個(gè)樣子的），然后點(diǎn)擊右上角那個(gè)Iconfont App
如下圖:

3、上面有一個(gè)紫色的 Import Icons 點(diǎn)擊上傳你下好的 SVG 圖標(biāo)。

4、上傳好的 SVG 圖標(biāo)會(huì)顯示在下方的 Untitled Set 中，然后選擇上方有個(gè)類似筆形狀的圖標(biāo)，點(diǎn)擊進(jìn)入編輯。解釋一下上面的選擇器。
。鼠標(biāo)箭頭 表示 選擇圖標(biāo)
。垃圾桶 表示 刪除圖標(biāo) ，一般選擇垃圾桶， 點(diǎn)一下圖標(biāo)就可刪除
。十字箭頭 表示 變換位置

5、在編輯中，第一個(gè) Tags 是表示你要查找這個(gè)圖標(biāo)時(shí)可以輸入的名字，第二個(gè)框輸入的是待會(huì)引用代碼時(shí)會(huì)用到的名字。我創(chuàng)建了花，所以就命名為 flower ，然后關(guān)閉編輯器，千萬別點(diǎn)下載。

6、然后點(diǎn)擊右下方的 Generate Font F ，進(jìn)入后是這個(gè)頁面，然后點(diǎn)擊紅圈中的齒輪，進(jìn)行下一步編輯

7、進(jìn)入編輯后，需要修改以下內(nèi)容。

8、Font Name 表示一會(huì)兒引入字體需要引入的 樣式名稱
Class Prefix 表示引入樣式的前綴名，如不設(shè)置后綴的話，引入的樣式名稱為 icon-flower

9、選擇 Support IE 8 和 Generate preprocessor variables for： Less 和Use a class

然后后面這個(gè)框內(nèi)填寫css需要引入的類名，我就寫了 .wyhicon 這個(gè)名稱
10、然后關(guān)閉編輯，點(diǎn)擊右下角download下載這個(gè)字體。

11、下載完畢后，壓解。修改style.css中的內(nèi)容

   /* 我們需將下面的url路徑改為引用的fonts文件夾的路徑，根據(jù)實(shí)際情況修改 */
   @font-face {
   font-family: "wyhicon";
     src:  url("../fonts/wyhicon.eot?q06q0o");
     src:  url("../fonts/wyhicon.eot?q06q0o#iefix") format("embedded-opentype"),
         url("../fonts/wyhicon.ttf?q06q0o") format("truetype"),
         url("../fonts/wyhicon.woff?q06q0o") format("woff"),
         url("../fonts/wyhicon.svg?q06q0o#wyhicon") format("svg");
     ...
   }
   /* 下方這個(gè)類中的字體樣式需要加上以下代碼中的font-family */
   .wyhicon {
     font-family: "wyhicon",PingFangSC-Light,"helvetica neue","hiragino sans gb",arial,"microsoft yahei ui","microsoft yahei",simsun,sans-serif !important;
     ...
   }
   .icon-flower:before {
      content: "e900";
   }

也就是在原來的style.css樣式下的.wyhicon下加一條font-family:
"wyhicon",PingFangSC-Light,"helvetica neue","hiragino sans
gb",arial,"microsoft yahei ui","microsoft yahei",simsun,sans-serif
!important;

11、然后在你的html文檔中引用就可以了