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中 如果 @font-face 引用名称(icomoon)发生变化以后的引用要对应相应的变化.icomoon {font-family: 'icomoon';}
要跟上面@font-face { font-family: 'icomoon';}
保持一致,