快应用之---使用阿里图标库iconfont

目的：快应用自 1030 开始（新增：font-family 及 font-face 支持），,就可以使用字体图标了，使用iconfont可以减少图片,加快渲染速度,使用后图标可以像文字一样改变大小和颜色

流程：

1、首先在阿里巴巴矢量图库中将所需要的图标放入到对应的项目中,找到我的项目如图2

 

将图标文件下载至本地

2、在css里自定义font-face

@font-face {

    font-family: iconfont;

    src: url('./iconfont.ttf')

}

.iconfont{

    font-family: iconfont;

    font-size: 36px;

 }

3、在template中的使用，class 中添加自定义的图标class,如2中的iconfont

（1）直接使用图标Unicode展示 

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

（2）对于定义在变量中的字体编码，需要转码

 

   <text class="iconfont" >{{ unescapeIconCode(iconCode) }}</text>

  script 中的转码方法：

 export default {

    data(){

      return {

        iconCode:''

      }

   }，

   unescapeIconCode(iconCode = '') {

         return unescape(iconCode.replace(/&#x/g, '%u').replace(/;/g, ''))

  }

 }

定义变量中的编码需要转码，不然不展示，重要的事说三遍三遍三遍.......