秒客网

在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:"专栏"},
]