uniapp vue3引入阿里字体图标

### 如何在 UniApp Vue3 项目中引入并使用阿里字体图标 #### 准备工作 为了确保顺利集成阿里字体图标，建议遵循以下原则： - **单文件原则**：一个项目中仅使用一个 `iconfont` 文件来避免因 Unicode 码冲突而导致的显示异常[^1]。 - **只增不删**：对于已经加入项目的图标应保持只增加而不删除的习惯，以便于后期维护。 #### 获取阿里字体图标 访问 [阿里字体图标官网](https://www.iconfont.cn/) 并按照如下操作获取所需图标： - 浏览网站挑选喜欢的图标并将它们添加到购物车； - 查看购物车内已选中的图标，并将其添加至个人创建或参与协作的项目内； - 下载包含所选图标的压缩包，并重命名该文件夹以方便后续查找与应用。 #### 导入至 UniApp 项目 完成上述准备工作后，需将下载好的图标集整合进 UniApp 工程目录下。具体步骤为将解压后的文件夹放置于合适位置（如 `/static/fonts`），这一步骤有助于简化路径配置以及提高加载效率。 #### 修改页面样式表 为了让网页能够识别新添加的字体资源，在 CSS 或者 LESS/SASS 中定义 @font-face 规则指向刚才上传的 .ttf/.woff 等格式字体文件。以下是基于LESS的一个例子: ```less @import url('path/to/iconfont.css'); // 定义字体面名称 @icon-font-path: "/static/fonts/"; @font-family-name: "iconfont"; @charset "utf-8"; @font-face { font-family: @font-family-name; src: url('@{icon-font-path}iconfont.eot'); /* IE9 Compat Modes */ src: url('@{icon-font-path}iconfont.eot?#iefix') format('embedded-opentype'), url('@{icon-font-path}iconfont.woff2') format('woff2'), url('@{icon-font-path}iconfont.woff') format('woff'), url('@{icon-font-path}iconfont.ttf') format('truetype'), url('@{icon-font-path}iconfont.svg#iconfont') format('svg'); } ``` #### 使用组件展示图标 最后通过编写简单的 HTML 结构配合 class 属性调用特定字符编码实现可视化效果。例如： ```html <i class="iconfont">&#xe60b;</i> <!-- 上述代码会渲染出对应编号 e60b 的图形 --> ``` 或者利用 uni-app 提供的数据绑定机制动态设置类名： ```javascript <template> <view :class="'iconfont ' + iconName"></view> </template> <script setup lang="ts"> import { ref } from 'vue'; const iconName = ref('icon-home'); // 替换成实际存在的 icon 类名 </script> ``` 以上就是完整的在 UniApp Vue3 项目中引入和运用阿里字体图标的过程说明。