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

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

一月 06, 2022
该文章更新于 2022.01.06

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

一、图标资源网站

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

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

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

    image-20220106222024817

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

    image-20220106222241106

    image-20220106222314346

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

    image-20220106222409027

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

    image-20220106222547237

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

    1. 第一种：使用在线方式

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

        image-20220106223116644

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

        image-20220106223842867

      3. 然后定义使用iconfont的样式

        1
        2
        3
        4
        5
        6
        7
        8
        .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;
            }

      4. 然后复制图标代码

      5. 最后我们在项目中使用

        image-20220106224340086

      6. 最终显示效果如下

        image-20220106224318955

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

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

        image-20220106224723232

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

        image-20220106224916224

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

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

        image-20220106225237772

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

        image-20220106230135605

      6. 结果也是一样

        image-20220106230243799