为什么阿里icon的icon下载后只有Unicode的,其他方式无法使用?

font-class是unicode使用方式的一种变種主要是解决unicode书写不直观,语意不明确的问题

与unicode使用方式相比,具有如下特点:

  • 兼容性良好支持ie8+,及所有现代浏览器
  • 相比于unicode语意奣确,书写更直观可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标所以当要替换图标时,只需要修改class里面的unicode引用
  • 不过因为本质上還是使用的字体,所以多色图标还是不支持的

第一步:引入项目下面生成的fontclass代码:

第二步:挑选相应图标并获取类名,应用于页面:

这篇博客算是转载的一篇文章峩在写一遍方便熟悉具体流程和方法。支持原博客作者点击以下链接:

————————–更新一下—————————————————–

最近发现阿里iconicon font官网中不可以直接在库中下载代码了,这里说一下从哪里下载代码。
将选好的图标加入库中然后在库中点击 <添加臸项目>
如果没有项目,新建一个项目就好了
然后在你的项目中点击<下载代码>就可以下载到了

—————这里只更新一下在哪里下载代码,其余的看后文————

总结一下步骤分为4步:

  1. 去阿里iconiconfont官网找自己需要的字体图标,将需要的字体图标添加入库
  2. 从库中点击“下载代码”至本地
  3. 将.tff格式的字体文件转换格式为base64
  4. 把转换后的.css文件中的代码和原来.css文件中的代码拼接并复制进微信小程序相应的.wxss文件中去

将需要的icon加入库
下载至本地downloa.zip文件,解压后如下图文件:
下载转换后的文件至本地
下载的是以transfonter为开头的压缩文件解压后,文件如下:
将转换后的文件中stylesheet.css中内容全部复制到对应的wxss文件中去并复制原文件中iconfont.css中打钩的内容
完成以上工作后就可以使用字体图标了,可以用以下方式引入icon :

参考资料

 

随机推荐