uniapp中如何使用iconfont

使用Iconfont在Uniapp中的步骤

下载Iconfont图标

登录阿里巴巴Iconfont官网，选择需要的图标并添加到项目。下载图标时选择Unicode或Symbol格式，解压后得到.ttf、.woff等字体文件和iconfont.css样式文件。

引入字体文件

将下载的字体文件（如iconfont.ttf）放入Uniapp项目的static目录下。例如static/fonts/iconfont.ttf。确保路径正确，避免运行时找不到文件。

修改CSS文件

打开iconfont.css，修改@font-face中的字体路径，指向static目录下的字体文件。例如：

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

引入样式文件

在项目的App.vue或页面的<style>中引入修改后的iconfont.css。例如：

@import "/static/fonts/iconfont.css";

使用图标

在模板中通过Unicode或类名使用图标。Unicode方式：

<text class="iconfont">&#xe600;</text>

类名方式（需CSS中定义）：

<text class="iconfont icon-home"></text>

使用Symbol引用方式

引入Symbol脚本

将下载的iconfont.js放入static目录，在index.html或入口文件中引入：

<script src="/static/iconfont.js"></script>

使用SVG图标

在模板中通过<svg>和<use>标签使用图标：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-home"></use>
</svg>

注意事项

• 确保字体文件路径正确，避免404错误。
• 若图标不显示，检查字体名称是否与CSS中定义的font-family一致。
• Symbol方式需在iconfont.js加载完成后使用，避免动态渲染问题。
• 使用自定义组件封装图标，提升复用性。例如：

  <template>
  <text class="iconfont" :style="{fontSize: size + 'px', color: color}">&#{{unicode}};</text>
  </template>
  <script>
  export default {
  props: ['unicode', 'size', 'color']
  }
  </script>