介绍/* * app.wxss * */.container {
,,,身高:,100%;
,,,显示:,flex;
,,,flex-direction:,列;
,,,对齐项目:,中心;
,,,justify-content:,之间的空间;
,,,/*,填充:,200 rpx 0; */,,,box-sizing:, border-box;
}/* * * * * * * * *在线字体代码开始* * * * * * * * */@font-face {
,,,字体类型:,& # 39;iconfont& # 39;;
,,,/*,project id 706535 */,,,src:, url (& # 39;//at.alicdn.com/t/font_706535_gcxl9md3eyj.eot& # 39;);
,,,src:, url (& # 39;//at.alicdn.com/t/font_706535_gcxl9md3eyj.eot? # iefix& # 39;),格式(& # 39;embedded-opentype& # 39;),, url (& # 39;//at.alicdn.com/t/font_706535_gcxl9md3eyj.woff& # 39;),格式(& # 39;woff # 39;),, url (& # 39;//at.alicdn.com/t/font_706535_gcxl9md3eyj.ttf& # 39;),格式(& # 39;truetype # 39;),, url (& # 39;//at.alicdn.com/t/font_706535_gcxl9md3eyj.svg # iconfont& # 39;),格式(& # 39;svg # 39;);
}/* * * * * * * * *在线字体代码结束* * * * * * * * *//* * * * * * * * *字体文件中的代码开始* * * * * * * * */.iconfont {
,,,字体类型:,“iconfont", !重要;
,,,,字体大小:16 px;
,,,字体样式:,正常;
,,,-webkit-font-smoothing:,平滑;
,,,-moz-osx-font-smoothing:,灰度级;
}
.icon_back: before {
,,,内容:,“\ e62c";
}
.icon_close: before {
,,,内容:,“\ e628";
}
.icon_refresh: before {
,,,内容:,“\ e732";
}
.icon_jiantou_bottom: before {
,,,内容:,“\ e605"
}
.icon_jiantou_top: before {
,,,内容:,“\ e733"
}
.icon_bill: before {
,,,内容:,“\ e627";
}
.icon_edit: before {
,,,内容:,“\ e63b";
}
.icon_edit_pen: before {
,,,内容:,“\ e609";
}
.icon_right_jiantou: before {
,,,内容:,“\ e7a5"
}/* * * * * * * * *字体文件中的代码结束* * * * * * * * */ /* * *,icon_back是自定义的类名,* * */只icon_back: before {
,,,内容:,“\ e7a5"
} /* * *,注意类名要对应,* * */& lt; text 类=癷confont icon_back"祝辞& lt;/text>
这篇文章给大家分享的是有关微信小程序中iconfont的使用方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<>强如何在小程序中正确的使用iconfont
一、iconfont添加字体
使用GitHub或其他账号登录iconfont,将我们需要的字体添加购物车,然后再添加到新建的项目中。
二,生成代码
点击查看在线链接,生成代码。
三,下载代码
点击下载到本地,将下载好的字体文件中的iconfont.css中的样式中的代码粘贴到小程序应用。wxs中。
四、复制代码
复制上面我们生成的在线链接粘贴到小程序应用。wxs中,最后代码如下图。
五、自定义类名
如果我们觉得图标的名字不好看,我们可以自定义每个图标的类名。
六,引用
最后我们在wxml中引用。
七、效果图。
感谢各位的阅读!关于“微信小程序中iconfont的使用方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
