icomoon字体图标使用详解

前言

字体图标在web前端经常用到，它展示的是图标，但本质是字体，所以为它设置属性时可以根据字体的属性设置。它的存在是为了补充精灵图的不足之处，实际开发中简单的样式图标可以使用字体图标，较为复杂的图标还是首选精灵图。这篇文章主要是针对icomoon字体图标的使用方式进行比较全面的讲解。

---

---

为什么要使用字体图标

因为图片不能很好地进行缩放，当图片进行放大时会变的模糊。而且加载每一张图片都需要一次“http请求”，因此也拖慢了整个加载页面的时间。如果没有图片编辑软件的话就很难对图片进行处理，大大加长了我们开发时的速度。而解决这一系列问题的方法就是将一些简单的图标用字体图标展示。

总结一下使用字体图标的优势

• 设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。
• 开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。
• 字体图标缩放不失真，不会变模糊。
• 减少网络请求次数，一个css文件可包含所有图标。
• 节约流量，图标是图片格式，每个几K到几十K，而css文件一般一共只有几K。

获取字体图标的网站

iconfont：https://www.iconfont.cn/
icomoon：https://icomoon.io/ 这个图标库是国外的网站，所以加载的时间会比较长
fontawesome：http://www.fontawesome.com.cn/
glyphicons：https://v3.bootcss.com/components/ 这个是bootstrap的图标库
weather icons：http://erikflowers.github.io/weather-icons/
lonicons：https://ionicons.com/
themify icon：https://themify.me/themify-icons
material design iconic：http://zavoloklom.github.io/material-design-iconic-font/index.htmls

字体图标的使用方式大同小异，我们只需要学会一种字体图标的使用就可以触类旁通，这里讲解的是icomoon字体图标

---

icomoon字体图标的使用

从官网获取图标

首先登录icomoon官网.点击红色箭头所指的icoMoon App

因为是国外的网站所以加载速度会比较慢，我们只需耐心等待


这个页面就是我们开发时所需要到的字体图标，我们可以根据自己的需求选择适当的图标，选择好图标之后，点击Generate Font

这里就是刚刚选择的所有图标，点击下载，将压缩包下载并解压

这是减压后的文件夹，在项目中需要的是fonts文件夹

---

icomoon的三种使用方式

使用字体图标到页面上我们需要将fonts文件夹放到项目文件夹下面

之后将style.css文件夹的代码放到页面中


接下来介绍字体图标的第一种使用方式

打开demo.html

复制小方块到html页面中


查看页面字体图标会显示到页面上

字体图标的第二种使用方式
除了上面的方法还可以使用伪元素添加转义字符的方式来应用图标


展示效果

字体图标的第三种使用方式

除了以上的两种方法，我们还可以用编码的方式来展示字体图标

查看效果

---

如何向字体图标文件中追加新的图标

在实际开发中，如果我们需要一个新的图标，而原先的图标文件中并没有这个图标，原先的图标还不能删除，因为我们页面中可以已经使用到原来的图标，这时我们就需要将这个新的图标添加到原先的图标中。

首先我们需要回到官网图标页面

点击导入图标

将json文件导入之后

这时我们就可以添加新的图标了，添加完成之后重新下载压缩包并解压将项目中的字体文件替换掉，之前下载的压缩包就可以删掉了，谨记：下载好的压缩包一定要留着