微信小程序坑点杂谈（十一）一分钟解决在小程序页面中引入iconfont字体图标遇到的css/wxss样式问题

微信小程序坑点杂谈（十一）一分钟解决在小程序页面中引入iconfont字体图标遇到的css/wxss样式问题

一、写在开头

本人只是一枚小小的新手开发者，所提的问题和解答很难超过个人水平，如果对你有帮助，那就太好了！

二、发现问题
我们在开发小程序的时候难免会使用到字体图标，那么如何在小程序中引入呢？字体图标的样式怎么从css完成到wxss的转换？接下来我将以阿里巴巴矢量库为例简单解释一下：
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

三、解决问题
首先要拿到字体图标，这里我以上面链接中的阿里巴巴矢量库为例，选择好需要的图标后，我们点击生成对应的css代码。：

复制如图中的代码链接，在浏览器中打开（记得加表头）：

通过上面的链接，我们拿到了字体图标的css代码，不过小程序支持的是wxss，所以我们复制这个代码到全局的css样式下即可（我这里是新建了一个iconfont.wxss，把代码丢在里面然后再在app.wxss中引用）：

这个时候就可以在页面中使用了，添加样式名（样式名复制原css代码中的字体样式名，同时前面需要加上iconfont！）即可！

这个时候我们就能在页面中使用字体图标了，而组件的话是不能使用全局样式的，关于组件的字体图标就下次再说吧！

好了，大概就是这样了，谢谢大家~