小程序以及h5引入阿里图标不显示最简单解决方案

小程序项目，按照老方法，图标部分手机不显示，经理炸毛，自己也头痛，网上搜了一大堆方法，有转化base64的，还有其他各种的，感觉太麻烦了也不好用，本人就讨厌麻烦，直男程序员一枚，今天花时间，认真研究了一下，发现这个方法兼容性最好，小程序上线半年了，也没有收到反馈看不见图标的，分享出来。

小程序以及h5引入阿里图标不显示最简单解决方案，亲测有效并用于方案。

第一步小程序项目结构如图：

第二步登录阿里巴巴，使用unicode，点击复制，代码直接甩到iconfont.wxss文件里面。

第三步 app.wxss 引入这个样式文件
@import “assets/images/icon/iconfont.wxss”

我们找到需要的icon图标
第四步

举例：我们需要使用收藏这个图标xml里面写法如下：

第五步在iconfont.wxss里面

收藏图标的unicode是 & #xe69e ; 改成“\e69e”，用哪个就在iconfont.wxss下面添加，so easy ！

好了，完美解决，论一个程序员的自我修养。

小程序以及h5引入阿里图标不显示最简单解决方案相关推荐

微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
文章目录 1. 下载阿里图标 2. 将下载的文件压缩放入到项目中 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html 4. 根据上面的Demo提示,页面需引入文件里面的i ...
Iconfont 阿里图库使用(小程序和H5)
前言现在前端发展的太快,前端优化也是,图片也是被近2年来比较火的就是阿里图库取代了,不管小程序还是H5 都在用好了,那么就介绍下如何使用吧阿里图库当然需要你到阿里官网 http://www. ...
h5 bootstrap 小程序模板_一道面试题小程序与H5的区别
抛砖此文是一道面试题,又不仅仅是一道面试题面试题,在各个技术社区里都是一个永不落伍的话题,好像大多数人临面试前都会狂刷面试题,恨不得把所有面试题都看一遍,要说有用没,当然有用,因为大部分面试题确实 ...
微信小程序PHP文件建在哪里,微信小程序解析H5文件方法
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的: 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index. ...
taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
环境系统:windows 开发工具:微信开发工具RC V1.02.1907301 + vscode 微信基础库版本:2.8.1 Taro:v1.3.15 npm: 6.4.1 node: v8.12 ...
h5打开app_移动端产品比较分析：APP、小程序、H5
本文笔者从实际工作经验出发,结合参考相关文章,对移动端产品(APP.小程序.H5)从13个方面进行了比较分析,与大家分享. 移动端产品包括小程序(本文特指微信小程序).APP(安卓.IOS).H5页面 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...

小程序以及h5引入阿里图标不显示最简单解决方案

小程序以及h5引入阿里图标不显示最简单解决方案相关推荐

最新文章

热门文章