在vue项目中引入iconfont的字体图标

用户4718559996172025-06-06 10:14

一.以项目的形式下载iconfont的字体图标

在阿里图标库内找到需要下载的项目图标，点击按钮"下载至本地"

二.将下载的字体图标放入本地vue项目中

1.在项目中创建需要放置图标的文件夹，如/src/assets/iconfont

2.将下载的图标压缩包解压，并将其中的文件放入新建的iconfont文件夹下

三.在vue项目中使用使用该字体图标

1.在main.js内引入字体图标的css文件

arduino 复制代码

import './assets/iconfont/iconfont.css';

修改main.js后需要重新启动项目

2.处理图标文件冲突

启动后发现有报错提示：Conflict: Multiple assets emit different content to the same filename img/iconfont.svg

原因：项目中有多个地方引用或生成了同名的 img/iconfont.svg 文件，导致打包时文件冲突

解决方法：修改 svg 文件输出路径

在 vue.config.js 或 webpack.config.js 里，给 svg 文件加上 hash 或目录区分，避免同名覆盖。例如：

js 复制代码

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .tap(options => {
        options.name = 'img/[name].[hash:8].[ext]'; // 加 hash 防止冲突
        return options;
      });
  }
}

此时就可以正常启动了。

3.使用字体图标

html 复制代码

<div>
          <!-- 方法一：使用font class -->
          <i class="iconfont-oorder icon-oorder-tongyong-shezhi"></i>
          <!-- 方法二：使用unicode -->
          <i class="iconfont-oorder">&#xe86d;</i>
</div>

my-iconfnot为引入的font-family，icon-tongyong-shezhi为你要使用的图标名称

my-iconfnot可在引入的图标文件的iconfont.css内的@font-face下查看