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 图标。