微信小程序使用阿里图标
方法一:使用本地文件
1 下载阿里图标到本地 http://iconfont.cn/
2.转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)
3.文件解压
解压后会得到三个文件:demo.html,iconfont.ttf,stylesheet.css。下面会需要iconfont.ttf,stylesheet.css拷贝到ali-con目录下
4.建立路径
在根目录下建立static/ali-con存放阿里图标内容。其中建立iconfont.acss是方便管理阿里图标
iconfont.wxss内容
1 @import "stylesheet.wxss";2 /* 3 @font-face {4 font-family: 'iconfont';5 src: url('iconfont.eot');6 src: url('iconfont.eot?#iefix') format('embedded-opentype'),7 url('iconfont.woff') format('woff'),8 url('iconfont.ttf') format('truetype'),9 url('iconfont.svg#iconfont') format('svg');10 }11 */ 12 .iconfont{ 13 font-family:"iconfont" !important; 14 font-size:12px; 15 font-style:normal; 16 } 17 18 .icon-home:before{content:'\e613';} 19 .icon-home1:before{content:'\e7a3';} 20 .icon-gouwuche:before{content:'\e60c';}
5.使用
1 /*在wxss导入 阿里图标样式*/ 2 @import "/static/ali-icon/iconfont.wxss";
1 /*wxml 文件使用阿里图标*/2 <textclass="iconfont icon-fenlei li-ico"></text>
转载于:https://www.cnblogs.com/gzh529/p/10179278.html
微信小程序使用阿里图标相关推荐
- 微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
- 微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
- 微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标 首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
- 微信小程序引入阿里巴巴图标库(不下载)
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
- 微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
- 【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台 一 阿里云平台端 1.登录阿里云 阿里云物联网平台 点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
- 微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库 网上看到的方法,亲测成功:参考方法 下载font-awesome字体包 打开Transfonter网站,上传字体fontawesome-webfont.t ...
- 微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库 在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
- 微信小程序引入iconfont图标,解决渲染层失败(2022年7月11日)
前言 网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法 然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
最新文章
- Java 优先级的问题
- ‘MicrosoftWebDriver.exe‘ executable needs to be in PATH.
- python 单链表是否有回路_(Python3)数据结构--单链表之判断链表是否有环
- docker 相关基本命令(updating...)
- .net 中的DllImport
- 计算机c盘如何扩容,C盘满想换SSD遇涨价?教你C盘扩容技巧
- c语言 图形模式 在指定位置显示文本显示文字,C语言图形编程(四、图形文本-01)...
- Java一步到位!彻底了解JDK、JRE、JVM分别是什么及它们之间的联系
- Cloud Rush—聚是一团火
- Hulu机器学习问题与解答系列 | 二十九:WGANs:抓住低维的幽灵
- 手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
- 打造高质量的私域朋友圈,让营销效果翻倍
- Captura – 带键盘按键录制的录屏工具,支持直播[Windows]
- 无线路由器经常掉线断网的可能的原因
- 教你做一个送别人女友的网页相册(一)(HTML+CSS+JS实现)
- c#ATM之功能篇(存钱,取钱,转账,交易明细)完结篇
- PTA 7-4 分钟秒钟的时间相减
- pandas中访问使用多个索引的Series
- 公众号PHP模板修改,PHP 实现发送模板消息(微信公众号版)
- linux用mpi运行命令,linux mpirun命令