uni-app使用阿里矢量字体图标

在app.vue下,引入

<style>
@font-face {
  font-family: 'iconfont';  /* project id 1951514 */
  src: url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.eot');
  src: url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.woff') format('woff'),
  url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_1951514_c10bgx9xy2l.svg#iconfont') format('svg');
}

.iconfont{
	font-size: 16rpx;
	font-family: "iconfont";
	font-style: normal;
}
</style>

使用字体图标

<view class="ali-box">
      <view class="" v-for="(item,index) in listArrIcon" :key="index">
            <view class="view-box">
                  <text class="iconfont alili-icon">{{item.icon}}</text>
            </view>
           <text class="dec"> {{item.name}}</text>
      </view>
</view>

这里你要注意字体图标是否发生转义； 通过/ue不让它发生转义
listArrIcon:[
 {icon:"\ue616",name:"排行榜"},
 {icon:"\ue6bf",name:"知识库"},
 {icon:"\ue61c",name:"看新闻"},
 {icon:"\ue676",name:"博问"},
 {icon:"\ue610",name:"专栏"},
]