vue项目引入iconfont图标

### 添加并使用 Iconfont 图标

#### 注册与获取图标
为了在 Vue 项目中使用 Iconfont 字体图标，需先访问 Iconfont 官网完成账号注册，并挑选所需的图标加入购物车创建图标库[^1]。

#### 下载图标资源
下载所选图标的压缩包至本地环境。该压缩包内含 `iconfont.css` 文件及其他必要文件，如字体文件等。确保按照实际情况调整这些文件的引用路径以防止加载失败[^3]。

#### 配置 Webpack 或 Vite 构建工具
对于采用 Webpack 的 Vue CLI 项目，在 `src/assets/styles` 目录下新建或编辑 CSS/SCSS 文件来导入 `@import url('//at.alicdn.com/t/font_xxx.css');` 这样的远程样式表链接；如果是基于 Vite 创建的新一代应用，则可以在全局样式入口处添加相同语句实现自动引入[^4]。

#### 使用图标组件
当一切配置就绪之后就可以像下面这样轻松调用所需图标了：

<i class="iconfont icon-eye"></i>

如果要展示彩色版本则依照官方文档说明操作即可。

#### 更新已有项目的图标集
针对已经集成过一次 Iconfont 并想要追加更多样式的场景，建议把最新版 @font-face 规则合并入旧有的 style 表达式里去，同时留意解决可能存在的同名冲突问题[^5]。

相关问题

vue2引入iconfont

要在Vue2中引入iconfont，可以按照以下步骤进行操作：

1. 首先，在iconfont官网上选择需要的图标，并将其加入购物车。
2. 在购物车中，选择“symbol”作为图标引入方式，并勾选“下载到本地”选项。
3. 解压下载的文件，将其中的iconfont.css和iconfont.js文件复制到Vue项目的静态资源文件夹（如public目录）下。
4. 在index.html（或者其他主页面）中，通过link标签引入iconfont.css样式文件：

<link rel="stylesheet" href="./static/iconfont.css">

5. 在Vue组件中，可以使用以下方式引入iconfont图标：

<i class="iconfont icon-图标名称"></i>

其中，icon-图标名称表示你在购物车中选择的图标的类名。

这样就可以成功在Vue2中引入iconfont图标了。记得在使用图标之前确保已经启动了开发服务器或者重新构建了项目。

vue3引用iconfont图标

可以使用以下步骤引用iconfont图标：

1. 在iconfont官网上下载iconfont图标

2. 将下载后的iconfont.css和iconfont.ttf文件放置在项目的src/assets文件夹中，可以自己创建一个iconfont文件夹

3. 在vue项目的main.js中引入iconfont.css文件

4. 使用i标签以及对应的class，即可使用iconfont图标。

例如，使用一个名为“icon”的class，可以添加以下代码：

<i class="icon">&#xe62f;</i>

注意，其中的&#xe62f;代表对应的字体文件在iconfont.ttf中的unicode码。