1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 【微信技术-微信小程序】------- 微信小程序引用阿里巴巴iconfont图标库样式使用说明

【微信技术-微信小程序】------- 微信小程序引用阿里巴巴iconfont图标库样式使用说明

时间:2022-01-02 04:55:26

相关推荐

【微信技术-微信小程序】------- 微信小程序引用阿里巴巴iconfont图标库样式使用说明

1.在阿里巴巴iconfont图标库中下载样式文件.[iconfont-阿里巴巴矢量图标库] 如下:

(1)首先选择【unicode】编码方式 然后点击【下载至本地】;

(2)下载完毕 进行解压 然后打开解压完成之后的文件找到【iconfont.ttf】如下:

2.对文件进行转码【base64】让微信小程序支持此样式;如下:【转换地址:Online @font-face generator — TransfonterThis tool converts any TTF, OTF, WOFF, WOFF2 or SVG fonts to css @font-face formats with CSS and HTML sample files./】

(1)点击【Add fonts】选择【iconfont.ttf】文件 在勾选其他配置;

(2)点击【Convert】开始进行转换、出现【Download】然后进行点击下载转换后文件如下:

(3):打开转换后文件如下;

3,对转换后的文件在微信小程序中使用;

(1)把转换后的文件拷贝在项目文件中【根据自己的项目结构进行放在对应的地方】,把【stylesheet.css】后缀名改成【stylesheet.wxss】

(2)打开【stylesheet.wxss】文件 ,需要把刚才在阿里巴巴图标平台下载的样式文件中的【iconfont.css】的一部分代码进行【拷贝】然后【粘贴】至微信小程序的【stylesheet.wxss】中 如下:

(1)【iconfont.css】文件:

(2)【stylesheet.wxss】文件

(3)在【app.wxss】中引用此【stylesheet.wxss】即可;

[最后就完成此配置].

4.效果图如下:

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