uniapp + vue3 引入 iconfont
时间: 2024-12-31 20:45:18 浏览: 7
### 如何在 UniApp 和 Vue3 项目中引入并配置 Iconfont 图标库
#### 准备工作
为了能够在 UniApp 和 Vue3 项目中使用 Iconfont 图标,首先需要访问 [Iconfont](https://www.iconfont.cn/) 并挑选所需的图标[^1]。创建一个新的项目或选择现有项目来保存所选图标。
#### 下载与安装
完成图标的选取之后,下载这些图标至本地环境。这一步骤会提供一个压缩包,其中包含了 `iconfont.css` 文件以及字体文件(通常为 `.ttf`, `.woff`, `.svg` 等格式)。
#### 配置 CSS 路径
将解压后的 `iconfont.css` 复制到项目的公共资源目录下,例如 `/static/css/` 或者按照个人习惯放置于其他合适位置。接着修改此CSS文件内的 URL 字体链接地址,使其指向正确的相对路径下的字体文件[^3]。
#### 修改 App.vue 引入全局样式
为了让整个应用都能识别 Iconfont 的类名,在根组件 `App.vue` 中通过 `<style>` 标签导入之前调整过的 `iconfont.css`:
```html
<style>
@import './static/css/iconfont.css';
</style>
```
#### 使用图标
此时可以在任何页面或组件内利用 HTML 实体编码的方式调用所需图标,如下所示:
```html
<i class="iconfont"></i> <!-- 假设这是某个具体图标的实体码 -->
<!-- 或者使用 Unicode 编号 -->
<span class="iconfont icon-home"></span>
```
对于某些特殊场景如真机预览时遇到的问题,则需确认网络请求是否正常加载了外部资源;另外也可以尝试采用 Base64 编码形式嵌入字体数据以减少跨域限制的影响[^2]。
阅读全文