微信小程序:导入阿里巴巴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";

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


界面设置
效果

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

你可能感兴趣的:(微信小程序:导入阿里巴巴iconfont作为图标)