iconfont与icomoon字体图标你居然不会用？？

字体图标

一些结构样式简单的小图标，它其实是文字，兼容性也好。如下：

1、阿里矢量图标库

https://www.iconfont.cn/

1、 选择一个图标库

2、 选择自己需要的图标加入‘购物车’

3、 点击右上角的 购物车 图标，然后点击下载代码

​ 3.1、也可以先添加到项目，然后到项目中下载到本地，这样方便以后添加新图标时可以在原有图标添加新图标

​ 3.1.1、直接下载该项目

​ 3.1.2、在该项目的基础上 添加新图标

​ 选择项目

​ 此时该项目中在原有图标的基础上增加了新图标，点击下载即可

4、 将下载的文件复制粘贴到html文件夹的同级文件夹下，或者放到html文件夹/css文件下 都可以

​ 4.1、放到与html,css,等同级文件夹

​ 4.2、放到css文件夹下

​

​ 4.3、放到html文件夹下

​

​ 这三个都行！！

5、 打开下载的文件中的 iconfont.css文件，将下面内容复制

6、 将复制的代码粘贴到自己的html文件调用的 对应的css文件中

7、 打开该文件夹下的.html文件

然后选择对应的图标，将其图标下的 字码复制

8、 将复制的字码粘贴到html中，并将使用字体图标的标签类名改为对应的 css样式中的类名

9、 此时打开浏览器测试，就可以看到字体图标成功使用

2、外国的图标库：

http://icomoon.io

1、点击右上角

2、选择自己需要的图标

3、如觉得此页面样式自己不喜欢，可以下拉点击如下：

4、此时就会有更多的图库提供选择

5、选择好自己要的图标后，选择右下角获取文字图标

6、点击下载

7、此时下载好的文件夹内容如下

8、将里面的fonts文件夹复制到工程目录下（即与存放html文件夹同级）

9、用记事本方式打开里面的style.css，然后复制下面这一段到要使用的css中

10、特别注意： 将上面复制的粘贴到css中时，url 路径需要在前面添加：. ./ 要不然可能会出现无法显示图标的问题。如下：

11、打开下载文件中.html后缀的页面，选择自己使用的图标，然后复制该图标右下角的小矩形

12、粘贴到html标签中，打开浏览器测试即可

13、在原有图标追加新图标

选择如下

此时会显示自己原本有的所有图标，下拉在去添加新图标即可