美文网首页小程序微信小程序(应用号)微信小程序
微信小程序使用阿里巴巴iconfont字体图标

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

作者: 枝枝_zhizhi | 来源:发表于2017-12-18 10:32 被阅读148次
    1. 打开阿里巴巴iconfont官网(http://www.iconfont.cn/);

    2. 把用到的字体图标加到项目里面;

    3. 进入到项目里面,选择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
    1. 效果图 image.png
    好啦,本宝宝要去撸代码去啦!!!

    相关文章

      网友评论

        本文标题:微信小程序使用阿里巴巴iconfont字体图标

        本文链接:https://www.haomeiwen.com/subject/owypwxtx.html