小程序开发素材获取

 

小程序开发底部图标

http://www.iconfont.cn/collections/detail?cid=29

阿里的矢量图标库，很不错，wap，H5app ,小程序很实用

 

小程序字体图标

https://transfonter.org/

网站找到的ttf字体文件，无法导入到小程序中使用，可以在这个网上直接转为base64的编码放到WXSS文件中。

@font-face {

font-family: 'wui_iconfont'; /*这里定义字体样式名*/

src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZ...) format('truetype');

}

/*这里根据样式名定义字体样式*/

.wui_iconfont {

font-family: "iconfont"!important;

font-size: 16px;

}

/*这里定义每个字体的样式名*/

.icon-cart:before {

content: "\e656";

}

/*这里定义每个字体的样式名...*/

.icon-cartsmall:before {

content: "\e657";

}

 

/*在小程序中使用*/

<text class='wui_iconfont icon-cart'></text>

很方便，再也不用做图片了，字体的好处很明显，可以通过样式修改大小、改吧字体颜色，比用png等图标方便多了。