保姆级傻瓜式icomoon字体图标的下载与使用

官方网站: link

一、下载icoMoon字体图标

1.点击右上角 icoMoon App

2.点击自己想要的图标，选中后颜色会变亮

3.如果没有自己想要的，滑道底部点击Add lcons From Library…,选择更多的字体图标样式

4.其中也有付费的，我们选择免费的就可以了，正常是够用的，Purchase是购买的意思，我们选下面Add的就行

5.进去仍是单击选择，图标亮了就是选中成功

6.我们还可以选中上面导航栏中的笔状图标，再点击要编辑的图标，对选中的图标进行简单的编辑，比如旋转，大小缩放，位置偏移都是可以调的

7.编辑后点错号就自动保存了

8.选中想要的后，点右下角Generate Font 生成字体

9.进入后选择右下角 Dowload 下载所选中的所有字体图标

10.下载完压缩包后对其进行解压文件

二、使用icoMoon字体图标

1.把下载后的fonts文件夹放到需要字体图标文件的根目录下

2.点开文件style.css,把字体文件通过css引入到页面中

3.复制style.css中所框起来的内容到所需要的文件中

4.点开demo.html文件，选择想要的字体图标，复制后面的小方框即可

5.可以用span标签所包裹住，必须给span声明一个字体，也就是引入css中的字体，否则没有效果

6.最后我们就可以给它以字体的方式设置样式

最终就完成了，快动手一起操作起来吧