微信小程序引入外部的CSS或iconfont

使用外部样式的方法是：

@import '相对路径下的外部样式文件.wxss';

iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.

方案如下：

1、到阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件

 

2、使用线上平台工具 (Online @font-face generator — Transfonter)将字体文件转化base64格式

​​​​​​​

将下载文件目录下.css文件直接修改成.wcss文件，放置到项目目录下，在开发者工具中打开，复制下面加在文件中

[class^="icon-"],

[class*=" icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'iconfont' !important;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  /* Better Font Rendering  */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

将第一步中下载的文件中iconfont.css用记事板打开复制选中代码

保存文件，就可以在需要地方引入文件了，在wxml中就可以使用图标了

<text class="iconfont weixin2" ></text>