微信小程序使用阿里巴巴iconfont字体图标

打开阿里巴巴iconfont官网 http://www.iconfont.cn/;
把用到的字体图标加到项目里面;
进入到项目里面，选择font class方式来使用，如果没有生成过代码的同学点生成，已经有代码的直接复制代码;

iconfont.png

iconfont.png

4.浏览器新建页面，把复制的代码粘贴到地址栏，回车。然后全选页面的内容，复制;

image.png

5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss，项目里的每个页面都能使用，如果只是某一个页面用到的话，也可以粘贴到对应页面的wxss文件);

image.png

6.使用某个字体图标。把鼠标悬浮到要使用的字体图标上面，然后点复制代码，或者直接复制字体图标的类名(没留意过叫什么，应该是叫类名吧)。然后到项目要使用字体图标页面的wxml，用个微信小程序支持的行内标签(我用的是<i>)，把类名粘贴上去就OK啦！

<view>
    <i class="iconfont icon-feiji2" style="font-size: 100px; color: red;" />
    <text>我是字体图标，飞机</text>
</view>

image.png

iconfont

告辞

最后编辑于：2018.12.14 16:24:53

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。