uni-app引用iconfont图标

在www.iconfont.cn中下载自己收藏的图标项目

Iconfont-阿里巴巴矢量图标库

下载解压后文件目录如下

文件目录

在uni-app中引用iconfont图标

将iconfont.css复制到uni-app项目中。
iconfont.css文件如下：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1564391050125'); /* IE9 */
  src: url('iconfont.eot?t=1564391050125#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABL0AAsAAAAAJcgAABKjAAE...') format('woff2'),
  url('iconfont.woff?t=1564391050125') format('woff'),
  url('iconfont.ttf?t=1564391050125') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1564391050125#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;
}
...

方法一：只保留iconfont.ttf
将iconfont.ttf复制到iconfont.css相同目录中。并修改iconfont.css。注意iconfont.ttf路径。

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

方法二：只保留base64

@font-face {font-family: "iconfont";
  src:
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAH2cAAsAAA... ') format('woff'); 
}
...

使用

在全局App.vue中引用class文件

<style>
    /*每个页面公共css */
    @import './static/style/iconfont.css';
</style>

在page页面中使用

<icon class="icon iconfont" :class="item.icon"></icon>

参考： http://ask.dcloud.net.cn/question/57433