微信小程序使用阿里巴巴iconfont字体图标
2017-12-18 本文已影响148人
枝枝_zhizhi
-
打开阿里巴巴iconfont官网(http://www.iconfont.cn/);
-
把用到的字体图标加到项目里面;
-
进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成,已经有代码的直接复制代码;
iconfont.png
iconfont.png
![](https://img.haomeiwen.com/i3283293/05539d0a918fd525.png)
![](https://img.haomeiwen.com/i3283293/ac7670ee46500909.png)
6.使用某个字体图标。把鼠标悬浮到要使用的字体图标上面,然后点复制代码,或者直接复制字体图标的类名(没留意过叫什么,应该是叫类名吧)。然后到项目要使用字体图标页面的wxml,用个微信小程序支持的行内标签(我用的是<i>),把类名粘贴上去就OK啦!
<view>
<i class="iconfont icon-feiji2" style="font-size: 100px; color: red;" />
<text>我是字体图标,飞机</text>
</view>
![](https://img.haomeiwen.com/i3283293/94e6fa7ca0443bc8.png)
![](https://img.haomeiwen.com/i3283293/316532bb5cd819bb.png)
-
效果图
image.png