登陆

使用矢量字体自定义小程序icon组件图标

admin 2022-11-25 6人围观 ,发现0个评论

小程序开发教程栏目介绍如何自定义小程序icon组件图标。

微信小程序代码编写

微信小程序的代码编写就比较容易了,首先编写 WXSS 文件,将刚刚拿到的远程字体链接直接粘贴到 WXSS 中,然后编写自定义的 iconfont 样式,最后在 icon 组件中引用即可。其代码如下:

WXSS 代码

其中要注意的是,在 iconfont 中复制的 font-face 代码是直接粘贴到 WXSS 中的。咖啡豆图片的 Unicode  把前边的 &#x 转为 \ 即可,然后将其放到 icon-coffee 的 content 中。

@font-face {  font-family: 'iconfont';  /* project id 1834535 */   src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot');  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot?#iefix') format('embedded-opentype'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff2') format('woff2'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff') format('woff'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.ttf') format('truetype'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.svg#iconfont') format('svg'); }.iconfont {  font-family: "iconfont" !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; }.icon-coffee:before {  content: "\e634";  color: darkgoldenrod;  font-size: 70px; }

WXML 代码

运行效果

至此,使用矢量字体自定义小程序 icon 组件图标的流程就介绍完了。如果你有什么疑问,欢迎讨论。

相关免费学习推荐:小程序开发教程

以上就是使用矢量字体自定义小程序 icon 组件图标的详细内容,更多请关注其它相关文章!

请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP