在微信小程序中添加字体图标的方法

最近开始开发微信小程序，遇到了一个问题，怎么往微信小程序项目里添加字体图标呢，比如，我要添加阿里图标的字体图标，那些字体文件又应该放到哪个目录下面呢？下面来帮大家解决这个需要的问题。

先给效果图大家看看：

一、添加字体图标到项目

登陆阿里图标库，选择适合你项目所需要的字体图标，然后添加到一个项目里，这个步骤像我们平时做项目一样。

例如：

二、下载图标项目文件

添加完成你所需要的字体图标之后下载解压，这跟我们平时往web项目中添加的步骤一样，不同的是我们不需要把整个下载下来的文件都加到项目中。

例如：

三、替换css文件头部

把下载下来的iconfont.css文件中的字体路劲替换成Unicode中的这段代码，目的是更换字体图标链接。

例如：

四、复制iconfont.css内容到.wxss文件中

最后我们只需要把iconfont.css的内容复制到所需要的引用的.wxss文件中就可以了，无需引入整个文件夹就可以引用，比我们平时做项目过程中引入字体图标更加简单。

例如把替换后的文件复制到.wxss(本例子是示范作用，我只复制了开头一小段代码)：

@font-face {
font-family: 'iconfont'; /* project id 1226269 */
src: url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.eot');
src: url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.woff') format('woff'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-x:before {
content: "\e600";
}

HTML：

<icon class='iconfont icon-y'></icon>

微信小程序中添加字体图标和我们平时web项目添加图标其实差不多，就是路基的不同，要换成Unicode的路径，下载下来的字体不需要全部添加到项目文件中，还有就是小程序中的标签也不同，这个需要注意一下。