uniapp内使用iconfont

### 配置和使用 IconFont 图标的步骤 在 UniApp 项目中集成和使用 IconFont 图标是一个常见的需求，以下是详细的配置方法： #### 1. 下载 IconFont 文件 前往阿里巴巴矢量图标库 (https://www.iconfont.cn/) 创建属于自己的图标集合，并下载对应的 `iconfont` 字体包。该字体包通常包含以下文件： - `iconfont.css`: 定义图标的样式。 - `iconfont.ttf`, `iconfont.woff`, `iconfont.svg` 等字体文件。 这些文件需要被放置到项目的静态资源目录下，例如 `/static/fonts/` 路径中[^1]。 --- #### 2. 修改 CSS 文件中的路径 打开 `iconfont.css` 文件，将其默认的相对路径改为适合 UniApp 的绝对路径。例如，将以下代码中的相对路径替换为基于项目根目录的路径： ```css @font-face { font-family: "iconfont"; src: url('@/static/fonts/iconfont.woff2?t=1667640554436') format('woff2'), url('@/static/fonts/iconfont.woff?t=1667640554436') format('woff'), url('@/static/fonts/iconfont.ttf?t=1667640554436') format('truetype'); } ``` 此操作确保了字体文件能够正确加载[^4]。 --- #### 3. 引入 IconFont 样式表 在全局入口文件 `App.vue` 或者特定页面的 `<style>` 块中引入 `iconfont.css` 文件。通过以下方式实现： ```vue <style> @import '@/static/fonts/iconfont.css'; </style> ``` 这一步使得整个应用都可以访问到 `iconfont` 类的相关样式。 --- #### 4. 使用 IconFont 图标 可以通过多种方式进行图标渲染，具体取决于实际需求和个人偏好。 ##### 方法一：直接使用 HTML 结构 利用 `<text>` 标签配合 `class` 属性来显示图标。例如： ```html <view> <text class="iconfont icon-a-21-xiugai"></text> </view> ``` 这里的 `icon-a-21-xiugai` 是具体的图标类名，需根据下载的 `iconfont.css` 文件中的定义进行调整。 ##### 方法二：结合组件化方案 如果希望更灵活地管理图标，则可以借助 `uni-icons` 组件或其他封装好的工具。例如： ```html <template> <view> <uni-icons custom-prefix="iconfont" type="a-21-xiugai"></uni-icons> </view> </template> <script> export default {}; </script> ``` 注意，此时的 `type` 参数应与 `iconfont.css` 中定义的图标名称一致[^3]。 --- #### 注意事项 - **更新图标**: 如果后续新增或删除某些图标，请重新生成并覆盖原有的 `iconfont` 文件，同时同步修改引用路径。 - **性能优化**: 对于大型项目而言，建议仅保留必要的图标子集以减少打包体积。 - **跨平台兼容性测试**: 不同端（微信小程序、H5、APP）可能对字体解析存在差异，务必逐一验证效果[^2]。 ---