前端如何引入小巧精美的图标？看完这篇你就会了

前言

        我们在编写前端的时候，只是运用前端三件套去实现页面效果，可能有自己不是很满意的，比如在一些场景下，想加一个图标，类似于这样的：如果是用图片呢，想一想应该是可以的，但是图片的颜色啥的自己不满意，想改成这样的：，更或者是这样的：。

总会有一种是自己喜欢的，即小巧又美观，样式设置也是非常的方便，怎样才能实现这样的功能呢？下面我将来介绍一下HTML页面引入这些小图标的方法。

一、介绍

        其实啊，这些小图标也类似文字，只是显示的样子很独特而已，它能像文字一样实现改变大小、颜色、加粗等等效果，在编写网页的时候使用和更改样式也非常方便。

二、获取图标文件

这里我有两个网站可以下载得到图标文件，一个是icomoon，  一个是iconfont ，两个都是图标库

个人比较常用的是icomoon,网站是长这样的：Icon Font & SVG Icon Sets ❍ IcoMoon

网址是：Icon Font & SVG Icon Sets ❍ IcoMoon

 1.首先点击右上角的IcoMoon App图标

 然后就进入这个界面，你就可以选则你喜欢的或有需求的图标，下面的Select(6)是

选择了的图标数量

 然后点击这个，就可以预览自己选择的图标，

 然后继续点击Download就可以将图标文件的压缩包下载到本地了。

三、声明图标字体

        下载好文件后，将其解压，就有了这些文件，上面我也说过图标字体跟文字很像，所以说他是字体

用vscode或者记事本等工具打开style.css文件，将前面的几行代码复制带css样式文件中，或者<style>标签中，这就是字体图的声明，声明就放在第一行就可以

 

四、引入fonts文件夹

接下来将fonts文件夹复制或移到自己项目下的样式文件的同一目录下，也就是要和css样式文件要放在一起，如果不放在一起就需要注意声明字体图标的那几行代码，

 路径一定要对，不然字体图标显示不出来，

"./"表示于css文件同级目录下去找，"../"表示去父级目录中找，"../../"等等依次类推

五、复制图标到页面中

 双击demo.html文件在浏览器中打开，

 选择自己想要的图标，复制如图所示的那个小方框，别管那么多，将这个小框框复制到你需要添加图标的地方就引入了

复制到需要添加的地方：

 六、设置字体

接下来最后一步就是设置字体，也是很关键的一步，在设置css样式中使用font-family属性，设置值为'icomoon',

font-family:'icomoon';//设置字体

你只需要把他当做文字一样设置就可以了，颜色大小等都可以做设置，

另外字体图标也可以做为伪元素添加，使用before或after，将字体图标的小方框复制到content:'';的内容中也可以，当然也别忘了设置font-family的属性值为'icomoon',

肯定有人好奇，小方框右边的e9aa是代表了什么，其实他跟小方框一样都代表了这个字体图标，不同的是需要有转义字符’\‘。

 

 七、追加字体图标内容

如果没有下载到满意的图标，需要去重新下载的添加更多的图标，那就只需要重新引入fonts文件夹，将之前的fonts文件夹替换调就可以了