微信小程序：导入阿里巴巴iconfont作为图标

前几周，高中同学找我做微信小程序比赛的前端，尽管我css/js经验很少，大概有两次网页前端的经历：一次是在高一，（顺带一提，当时的我立志成为新媒体作者或者文艺从业者，并誓不当程序员，结果……当时应该还没有“真香”梗），所以我坚决地拒绝学习css/js，用ps画了一整张网页背景，用浮动div和热点区域之类的可视化工具加上大量的flash动画组装起了我觉得还挺好看的网页……

第二次就是大一暑假跟着廖雪峰的python-web项目，自己改了改用UIKit组装的前端，也算不上什么很深入的接触。

有点扯远了，总之虽然前端方面菜的很，但画画图标，搞搞排版还是可以的。小组的组长把UI的大致排版给做好了，我寻思着就先导入些图标，顺便学一下微信小程序的前端跟普通css/js有啥不一样。之后就照例先百度，然后实践了一下，过程挺简单。不过可能因为时间先后的关系，有一些跟网上教程略有不同的地方，之后会讲到。

首先在Iconfont-阿里巴巴矢量图标库搜索自己想要的图标，中英文都有。有些图标的粗细可能不统一，可以在图标作者的仓库里找一些相同风格的图标。然后就可以下载代码，格式很全，像SVG可以直接用在Android界面资源的设计里。
将需要的图标加入购物车
点击下载代码
下载好的文件
其中有用的是iconfont.css，这里就是我实际操作跟网上博客所说的有些不一样的地方了。网上博客介绍说要把iconfont.css里的内容经过一个网站进行BASE64的转码。但可能是网站更新了，iconfont.css重命名成iconfont.wxss就可以直接在微信小程序里使用。

直接重命名就能使用

/* iconfont from https://www.iconfont.cn/          */
/* 通过覆盖自动生成的BASE64代码更新icon列表（大概吧）  */

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1552055024198'); /* IE9 */
  src: url('iconfont.eot?t=1552055024198#iefix') format('embedded-opentype'), /* IE6-IE8 */
  /*实际这里的url很长，为了篇幅美观就删减掉了*/
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAmgA...') format('woff2'),
  url('iconfont.woff?t=1552055024198') format('woff'),
  url('iconfont.ttf?t=1552055024198') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1552055024198#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-weibiaoti201:before {
  content: "\e60b";
}

.icon-settings:before {
  content: "\e7c7";
}

.icon-help:before {
  content: "\e625";
}

.icon-team:before {
  content: "\e606";
}

.icon-sponsor:before {
  content: "\e634";
}

.icon-message:before {
  content: "\e64f";
}

.icon-ionc--1:before {
  content: "\e501";
}

.icon-analyze:before {
  content: "\e621";
}

.icon-submit:before {
  content: "\e6b5";
}

.icon-taskmanege:before {
  content: "\e6e2";
}

.icon-anonymous:before {
  content: "\e615";
}

在app.wxss进行全局引用，这里的路径是直接相对于小程序根目录的。

@import "pages/iconfont/iconfont.wxss";

然后就能像普通的字体文件一样在页面里使用了。

<text class="iconfont icon-settings" style="font-size:35rpx"></text>
<text style='margin:0rpx 15rpx'>界面设置</text>

不得不说比起原生安卓，微信小程序这种类React的书写方式和渲染速度真是太给劲了，安卓的Preview常常会因为自定义View之类的一片灰，全靠脑补和真机测试……希望自己接下来也能坚持学习，拓宽一下视野。

微信小程序：导入阿里巴巴iconfont作为图标

猜你喜欢