uniapp中如何使用iconfont

使用Iconfont在Uniapp中的方法

下载Iconfont图标 访问Iconfont官网（https://www.iconfont.cn/），选择需要的图标并添加到项目。下载项目至本地，解压后获得`.ttf`、`.woff`等字体文件及`iconfont.css`。

引入字体文件 将下载的字体文件（如iconfont.ttf）放入Uniapp项目的static目录下，确保路径正确。例如：static/fonts/iconfont.ttf。

修改CSS文件 打开下载的iconfont.css，修改@font-face中的路径指向static目录下的字体文件。将CSS文件重命名为iconfont.scss并放入static目录。

@font-face {
  font-family: "iconfont";
  src: url('/static/fonts/iconfont.ttf') format('truetype');
}

全局引入样式 在App.vue中全局引入修改后的SCSS文件，确保所有页面可使用图标。

<style lang="scss">
@import '@/static/iconfont.scss';
</style>

使用图标 在Vue组件中通过<text>标签或<view>配合类名使用图标。类名参考iconfont.css中的定义。

<template>
  <view>
    <text class="iconfont icon-xxx"></text>
  </view>
</template>

注意事项

• 图标类名需与iconfont.css中定义的保持一致，如icon-xxx。
• 若图标显示为方块，检查字体路径是否正确或字体文件是否完整。
• 对于多端兼容性，建议测试不同平台的显示效果。

通过以上步骤，可以在Uniapp中顺利使用Iconfont图标。