【小程序开发】uniapp引入iconfont图标及使用方式

在uniapp中引入iconfont图标，你需要进行以下几个步骤：

1. 在iconfont官网搜索你需要的图标，添加到项目，生成font-class。
2. 下载生成的字体文件到本地。
3. 将字体文件和demo_index.html放到uniapp项目的静态资源目录，如static。
4. 在App.vue或者需要使用图标的页面中引入字体文件。
5. 使用类名前缀加上iconfont类以及对应的图标font-class名称来使用图标。

示例代码：

<!-- App.vue 或 页面的 <style> -->
<style>
@font-face {
  font-family: 'iconfont';
  src: url('~@/static/iconfont.eot'); /* IE9 */
  src: url('~@/static/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('~@/static/iconfont.woff2') format('woff2'),
  url('~@/static/iconfont.woff') format('woff'),
  url('~@/static/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

<!-- 页面中使用 -->
<text class="iconfont icon-example"></text>

注意：

• 路径 ~@/static/iconfont.xxx 是uniapp项目中静态资源的引用方式，~ 表示项目根目录。
• 图标font-class名称如 icon-example 是你在iconfont网站生成字体时设置的。