uniapp中如何使用iconfont
使用 Iconfont 在 Uniapp 中的步骤
下载 Iconfont 资源
访问 Iconfont 官网，选择需要的图标并添加到项目。下载时选择 Font class 格式，解压后会得到 .ttf 或 .woff 字体文件及 iconfont.css。
引入字体文件
将 .ttf 或 .woff 文件放入 Uniapp 项目的 static 目录（如 static/fonts/iconfont.ttf）。确保路径正确，避免编译后路径错误。
修改 iconfont.css
打开下载的 iconfont.css，修改 @font-face 中的路径指向 static 目录。例如：
@font-face {
font-family: 'iconfont';
src: url('/static/fonts/iconfont.ttf') format('truetype');
}全局引入 CSS
在 App.vue 的 <style> 标签中引入修改后的 iconfont.css：
@import "/static/fonts/iconfont.css";使用图标
在页面或组件中通过类名直接使用图标。例如：
<view class="iconfont icon-xxx"></view>其中 icon-xxx 是图标在 Iconfont 中的具体类名。
注意事项
- 字体格式兼容性：建议同时提供
.ttf和.woff格式以兼容不同浏览器。 - 图标更新：若 Iconfont 项目更新，需重新下载并替换文件。
- 性能优化：避免一次性引入过多未使用的图标，可按需加载。
通过以上步骤，可以顺利在 Uniapp 项目中集成并使用 Iconfont 图标。
