uniapp如何引入iconfont图标库

### 正确引入和使用本地 IconFont 图标 #### 在 `App.vue` 文件中引入 CSS 文件 为了确保整个项目都能访问到 IconFont 的样式，在项目的入口文件 `App.vue` 中全局引入 `iconfont.css` 是一种常见做法。具体实现如下： ```html <style> @import "@/static/font/iconfont.css"; </style> ``` 此方法能够使定义好的图标类名在整个应用内生效，方便后续页面调用[^2]。 #### 修改 `iconfont.css` 路径配置 由于 UniApp 采用的是基于 Vue.js 的单页应用程序架构，因此对于资源路径解析有特定的要求。需调整 `iconfont.css` 内部的字体文件链接为相对于静态资源目录 (`/static`) 下的确切位置。例如： ```css @font-face { font-family: "iconfont"; /* Project id */ src: url('/static/fonts/iconfont.woff2') format('woff2'), url('/static/fonts/iconfont.woff') format('woff'), url('/static/fonts/iconfont.ttf') format('truetype'); } ``` 上述设置保证了不同平台环境下均能正常加载所需字体文件[^4]。 #### 使用 IconFont 字体 完成以上两步之后便可以在模板里通过指定相应 HTML 标签来展示想要使用的图标。通常会借助 `<text>` 或者其他支持自定义样式的标签配合对应的 class 来呈现效果: ```html <template> <view> <!-- 这里的 'icon-a-21-xiugai' 需替换为你实际拥有的图标名称 --> <text class="iconfont icon-a-21-xiugai"></text> </view> </template> <script setup lang="ts"> // 组件逻辑... </script> <style scoped> .iconfont { font-family:"iconfont" !important; speak:none; display:inline-block; text-align:center; width:1em;height:1em;line-height:1; vertical-align:-0.15em;font-size:16px; } /* 添加更多个性化样式 */ .icon-a-21-xiugai:before{ content:'\e600'; /* 替换成对应图标的 Unicode 编码 */ } </style> ``` 这段代码展示了如何在一个组件内部声明并渲染一个来自 IconFont 库的具体图标实例。