微信小程序引用阿里巴巴iconfont

最近入坑微信小程序,对于引用阿里图标的方法写个小随笔css

1.将icon下载到本地小程序

  icon引入小程序须要将字体文件转换成base64格式,因此先解压压缩包 => 找到ttf格式文件 => 上传到平台转化为base64格式 => 下载压缩包 => 将css文件名改成wxss => 放入项目样式文件夹
微信小程序

  字体文件转换成base64格式的连接  https://transfonter.org/微信

  附上一张简单操做图xss

  

 

2.使用字体

  全局引入wxss样式,进行初步定义blog

  

 

  在须要使用的页面直接使用就能够啦 <icon class="iconfont icon-44"></icon>get

  (也能够不在全局汇总定义须要使用的图标,直接使用<icon class="iconfont icon-44"></icon>一样能够行得通,其中class中的icon-44须要和iconfont图标库里面的icon名称相同,如图)base64

  

相关文章
相关标签/搜索