1、进入官网

icomoon官网地址：https://icomoon.io/

2、进入官网后,

① 点击IcoMoon App

② 选择自己要的图标.

③ 会显示在Selection()里面.

④ 点击Generate Font创建字体图标

⑤ 点击Generate Font后,进入下载页面,点击Download,下载字体图标到本地

⑥ 下载到本地,解压文件夹,找到里面的fonts文件夹放到我们项目的根目录中。

3、使用字符

（1）在css样式里面声明我们使用的图标字体,告诉别人我们使用的自定义的字体.要注意两个问题.

① 声明我们使用的icomoon

②注意路径问题

/*声明*/@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;}

（2）HTML码中调用

<i class="icomoon">  </i>

（3）CSS中调用

/*引用icomoon字体图标*/.icomoon {font-family: 'icomoon';font-size: 16px;line-height: 26px;}

注意：

css中.icomoon {font-family: 'icomoon';}要跟上面@font-face { font-family: 'icomoon';}保持一致，

如果 @font-face 引用名称（icomoon）发生变化以后的引用要对应相应的变化。

如果觉得《字体图标库-icomoon的使用方法》对你有帮助，请点赞、收藏，并留下你的观点哦！