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

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

一月 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