使用代码方式在前端项目中引入图标

在前端项目开发中，我们经常需要引入一些图标，如果是使用直接下载的方式引入，那么后期想再修改图标颜色就会很麻烦，所以还是比较推荐用代码的方式引入。

一、图标资源网站

​ 我使用的是阿里巴巴矢量图库：https://www.iconfont.cn/

二、在项目中以代码方式引入图标的步骤

我们找到需要的图标，添加进购物车

然后我们点击购物车结算，把图标添加到项目

如果还没有项目，那么点击加号添加一个项目：

在资源管理-我的项目下可以看到我们刚刚创建的项目以及添加的图标

接下来有两种方式能把图标添加到我们的项目代码中

第一种：使用在线方式

点击“查看在线链接”，点击“暂无代码，点击生成”，得到生成的代码

点击“点此复制代码”，把代码粘贴到项目css中

然后定义使用iconfont的样式

.iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

然后复制图标代码

最后我们在项目中使用

最终显示效果如下

第二种方法是把图标文件下载到本地，在本地使用

1. 我们回到复制图标代码之前，点击下载至本地

1. 下载后解压得到如下文件

1. 我们复制以下四个文件

1. 在项目中新建iconfont文件夹，把上一步复制的四个文件放入其中

1. 在项目中引入iconfont.css这个外部样式，然后的使用方法就更在线的方式没什么区别了

1. 结果也是一样