Webpack项目中引入IconFont图标

ゝ一纸荒年。 2024-04-17 14:33 73阅读 0赞

本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。

IconFont官网：[https://www.iconfont.cn/][https_www.iconfont.cn]

1、打开[IconFont官网][https_www.iconfont.cn]并登陆自己的账户。

2、挑选你喜欢的图标，添加入库。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

3、进入购物车查看已挑选的图标，下载代码。

![20190827142609865.png][]

4、将下载后的图标代码解压，文件如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1][]

5、将解压文件复制到项目的 src/assets 目录下。

![2019082714262752.png][]

6、在 App.vue 中 引入 iconfont.css 。

<template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    // 全局引入 IconFont
    import "./assets/iconfont/iconfont.css"
    export default {
      name: 'App'
    }
    </script>
    
    <style type="text/css">
    #app{
      height: 100%;
    }
    </style>

7、如何使用IconFont图标。

在图标代码的解压目录中有一个 demo\_index.html 文件，其中包含了所下载的图标用法示例，提供了 Unicode 、Font class、Symbol 三种方式使用图标。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 2][]

Font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

例如， 在element按钮中使用上面的调试图标：

效果如下：

![20190827142823864.png][]

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8ba03a057adc4f6299d00eef478c2265.png
[20190827142609865.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dccfd92b3a2841cbaac1174d2ce3d85f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/36113909d92544bda955130df515b77e.png
[2019082714262752.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ef8f1c13bda6459ba0fe21ca22cec16e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/eca3b07d90bd4e04a2cf82c7f7a73cfd.png
[20190827142823864.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f9b48db86dab4c96beb417575c95ec4e.png