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

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

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

文章图片
【在微信小程序中添加字体图标的方法】二、下载图标项目文件
添加完成你所需要的字体图标之后下载解压，这跟我们平时往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：