700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 小程序使用阿里巴巴图标iconfont

小程序使用阿里巴巴图标iconfont

时间:2023-03-05 01:13:51

相关推荐

小程序使用阿里巴巴图标iconfont

小程序开发

图标使用

微信小程序开发,如果想使用像web端那样的字体图标,也是可以的,但是也只是支持Unicode,不支持彩色图标,在网上也查了很多,其实也有很多都相似,这里大概也就三种方法可以供参考,

base64位

这个我并不知道是什么,但是好像只需要转换下就可以了,也还是很简单的,

下载好所需的文件,例如iconfont的字体图标

下载好的代码里面的代码格式如下

3.在这个平台/上转换一下格式为base64位,转换的格式为

4.下载好的文件里面包含的有style.css 文件,打开文件,复制里面的代码

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1511264370476'); /* IE9*/src: url('iconfont.eot?t=1511264370476#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),url('iconfont.ttf?t=1511264370476') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1511264370476#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-kefu:before { content: "\e625"; }.icon-shenfenzheng:before { content: "\e626"; }.icon-quanping:before { content: "\e627"; }.icon-duigou:before { content: "\e628"; }.icon-shuoming:before { content: "\e629"; }

5.复制上面的代码到小程序的工程里面(需要在那个文件里面目录里面使用图标,就复制到哪里,如想要在index.wxss的目录使用,就在index.wxss里面复制,也可以在app.wxss里面全局使用)

[图片上传失败...(image-a98c56-1511345997286)]

第二种方法是以文件引入的方式

也就是上面的转换好的文件style.css 改写后缀为iconfont.wxss 因为微信只认wxss结尾的style文件

文件结构可以以下图所示

需要在哪个文件中用到图标就在哪里引入,一般都是放在app.wxss根目录下,供全局使用,引入方式为

/**app.wxss**/iconfont.wxss 的引入方式@import "/lib/style/iconfont.wxss";.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;}

直接使用style.css,不转换base64位

在下载好图标后,打开里面的找到style.css ,直接修改后缀为iconfont.wxss 然后移动到相应的目录结构,在app.wxss直接引入文件即可

这个是最为方便的一个做法,但是还没有验证是否可以审核。还待考察。

原文链接:/p/1cfc074eeb75

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。