iconfont使用引入和使用

### 如何在项目中引入和使用 IconFont 图标字体

#### 在 JavaScript 或 Vue 项目中的应用

为了在 `main.js` 中引入 IconFont 的 CSS 样式，在指定路径下添加如下代码可以实现字体图标的加载：

// 字体图标库导入(地址指向这个css文件就行)
import '@assets/fonts/iconFont/iconfont.css';

当需要在 HTML 文件或组件模板内显示这些图标时，只需利用 `<i>` 标签并设置相应的 `class` 属性来调用特定的 Font Class 类名[^1]。

对于 Vue 组件而言，实际使用的类名为创建项目时定义好的前缀加上具体的 Font Class 名称。例如，如果设定的前缀为 `icon-` 而目标图标的 Font Class 是 `ArrowLeft` ，那么最终应写成如下形式:

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

这表明了如何组合自定义前缀与官方提供的图标名称以形成完整的样式类字符串[^2]。

#### Uni-app 特定环境下的集成方法

针对 uni-app 平台上的开发工作，则可以在项目的根级入口文件 App.vue 内部通过 `<style>` 部分完成全局样式的注册操作。具体做法是在该部分加入一行用于链接至外部资源——即 IconFont 提供的服务端 URL 地址或是本地存储位置的相对/绝对路径：

@import url("common/iconfont.css");

上述方式确保了整个应用程序范围内都能访问到所引入的字体图标集，从而方便后续页面布局设计阶段灵活运用所需图形元素[^3]。