Webpack项目中引入IconFont图标

Vue项目引入IconFont图标教程

最新推荐文章于 2025-09-27 01:09:29 发布

原创最新推荐文章于 2025-09-27 01:09:29 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iconfont

Vue.js入门实战专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何在VueWebpack项目中引入和使用IconFont图标。步骤包括：登录IconFont官网选择图标，下载并解压图标代码，将文件复制到项目src/assets目录，全局引入iconfont.css，最后在组件中通过Fontclass方式使用图标。

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

IconFont官网：https://www.iconfont.cn/

1、打开IconFont官网并登陆自己的账户。

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

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

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

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

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 三种方式使用图标。

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

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

      <div class="el-button el-button--default el-button--small" @click="tiaoshi">
        <i id="collapsedIcon" class="iconfont icon-icon_tiaoshi"></i>
      </div>

效果如下：