小程序使用阿里巴巴图标iconfont

小程序开发

图标使用

微信小程序开发，如果想使用像web端那样的字体图标，也是可以的，但是也只是支持Unicode，不支持彩色图标，在网上也查了很多，其实也有很多都相似，这里大概也就三种方法可以供参考，

base64位

这个我并不知道是什么，但是好像只需要转换下就可以了，也还是很简单的，

1. 下载好所需的文件，例如iconfont的字体图标

下载好的代码里面的代码格式如下

3.在这个平台https://transfonter.org/上转换一下格式为base64位，转换的格式为

4.下载好的文件里面包含的有style.css 文件，打开文件，复制里面的代码

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1511264370476'); /* IE9*/
  src: url('iconfont.eot?t=1511264370476#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1511264370476') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1511264370476#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-kefu:before { content: "\e625"; }

.icon-shenfenzheng:before { content: "\e626"; }

.icon-quanping:before { content: "\e627"; }

.icon-duigou:before { content: "\e628"; }

.icon-shuoming:before { content: "\e629"; }

5.复制上面的代码到小程序的工程里面（需要在那个文件里面目录里面使用图标，就复制到哪里，如想要在index.wxss的目录使用，就在index.wxss里面复制，也可以在app.wxss里面全局使用）
[图片上传失败...(image-a98c56-1511345997286)]
第二种方法是以文件引入的方式
也就是上面的转换好的文件style.css 改写后缀为iconfont.wxss 因为微信只认wxss结尾的style文件
文件结构可以以下图所示

需要在哪个文件中用到图标就在哪里引入，一般都是放在app.wxss根目录下，供全局使用，引入方式为

/**app.wxss**/
iconfont.wxss 的引入方式
@import "/lib/style/iconfont.wxss";
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

直接使用style.css,不转换base64位

在下载好图标后，打开里面的找到style.css ,直接修改后缀为iconfont.wxss 然后移动到相应的目录结构，在app.wxss直接引入文件即可
这个是最为方便的一个做法，但是还没有验证是否可以审核。还待考察。

原文链接：https://www.jianshu.com/p/1cfc074eeb75