如何解决 Element-UI 图标字体库出现的乱码问题？

前端

2023-12-26 19:16:23

问题

在使用 Element-UI 图标字体库时，可能会遇到图标显示乱码的问题。这通常是由于以下原因造成的：

未正确加载字体文件
未正确使用字体图标类
未正确配置 Webpack 或其他构建工具

解决方法

1. 正确加载字体文件

在使用 Element-UI 图标字体库之前，需要先加载字体文件。具体步骤如下：

下载 Element-UI 字体文件包
将字体文件包解压到项目目录下的某个文件夹中
在 HTML 文件中添加以下代码：

<link href="./fonts/element-icons.css" rel="stylesheet">

这样就可以正确加载字体文件了。

2. 正确使用字体图标类

在加载字体文件之后，就可以使用字体图标类来显示图标了。具体步骤如下：

在 HTML 文件中添加以下代码：

<i class="el-icon-xxx"></i>

其中，xxx是图标的名称。
2. 在 CSS 文件中添加以下代码：

.el-icon-xxx {
  font-family: 'Element Icons';
  font-size: 24px;
}

这样就可以正确使用字体图标类了。

3. 正确配置 Webpack 或其他构建工具

如果使用 Webpack 或其他构建工具，还需要正确配置它们。具体步骤如下：

在项目中安装 file-loader 和 url-loader：

npm install file-loader url-loader --save-dev

在 Webpack 配置文件中添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: '[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ]
  }
};