微信小程序图标素材怎么开发？怎么使用？

　　微信小程序图标素材可以让小程序页面更佳美观，所以不少开发者向小编寻求素材，今天小编就为大家介绍一下微信小程序图标素材要怎么开发，以及使用的方法。

　　微信小程序图标素材开发

　　属*名类型默认值说明

　　typeString icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

　　sizeNumber23icon的大小，单位px

　　colorColor icon的颜色，同css的color

　　示例：

　　Page({

　　data: {

　　iconSize: [20, 30, 40, 50, 60, 70],

　　iconColor: [

　　'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

　　],

　　iconType: [

　　'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

　　]

　　}

　　})

　　微信小程序图标素材使用

　　下载font-awesome字体包

　　打开Transfonter网站，上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换，并未尝试)，选择base64编码，convert

　　convert完毕后点击Download(下载神慢)，下载得到的包中有stylesheet.css文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中

　　在写入app.wxss时将字体名改成了fa

　　/* app.wxss */

　　@font-face {

　　font-family: 'fa';

　　src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB......long long) format('truetype');

　　font-weight: normal;

　　font-style: normal;

　　}

　　.fa {

　　font-family: "fa" !important;

　　font-size: 16px;

　　-webkit-font-smoothing: antialiased;

　　-webkit-text-stroke-width: 0.2px;

　　}

　　/* makes the font 33% larger relative to the icon container */

　　.fa-lg {

　　font-size: 1.33333333em;

　　line-height: 0.75em;

　　vertical-align: -15%;

　　}

　　.fa-2x {

　　font-size: 2em;

　　}

　　//long long long...........

　　然后在小程序中使用class="fa fa-flag"等font-awesome即可

　　以上就是关于微信小程序图标素材的全部内容了，小编已经将开发的方法和使用的方法都交给大家了，希望大家参照这个流程都能成功开发和使用微信小程序图标素材，如果还有其他需求请关注微信小程序商店。

　　微信小程序图标字体怎么使用?

　　微信小程序图标插件开发代码

　　微信小程序地图标记功能怎么弄?