方法一:使用本地文件

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

微信小程序使用阿里图标相关推荐

  1. 微信小程序之阿里图标库icon的symbol使用方式

    近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...

  2. 微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件

    一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...

  3. 微信小程序使用阿里彩色图标

    微信小程序使用阿里彩色图标 首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...

  4. 微信小程序引入阿里巴巴图标库(不下载)

    微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...

  5. 微信小程序使用阿里云物联网API开发物联网应用

    微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...

  6. 【物联网】微信小程序接入阿里云物联网平台

    微信小程序接入阿里云物联网平台 一 阿里云平台端 1.登录阿里云 阿里云物联网平台 点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...

  7. 微信小程序使用font-awesome图标库

    微信小程序使用font-awesome图标库 网上看到的方法,亲测成功:参考方法 下载font-awesome字体包 打开Transfonter网站,上传字体fontawesome-webfont.t ...

  8. 微信小程序引入阿里巴巴图标库

    微信小程序引入阿里巴巴图标库 在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...

  9. 微信小程序引入iconfont图标,解决渲染层失败(2022年7月11日)

    前言 网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法 然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...

最新文章

  1. Java 优先级的问题
  2. ‘MicrosoftWebDriver.exe‘ executable needs to be in PATH.
  3. python 单链表是否有回路_(Python3)数据结构--单链表之判断链表是否有环
  4. docker 相关基本命令(updating...)
  5. .net 中的DllImport
  6. 计算机c盘如何扩容,C盘满想换SSD遇涨价?教你C盘扩容技巧
  7. c语言 图形模式 在指定位置显示文本显示文字,C语言图形编程(四、图形文本-01)...
  8. Java一步到位!彻底了解JDK、JRE、JVM分别是什么及它们之间的联系
  9. Cloud Rush—聚是一团火
  10. Hulu机器学习问题与解答系列 | 二十九:WGANs:抓住低维的幽灵
  11. 手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
  12. 打造高质量的私域朋友圈,让营销效果翻倍
  13. Captura – 带键盘按键录制的录屏工具,支持直播[Windows]
  14. 无线路由器经常掉线断网的可能的原因
  15. 教你做一个送别人女友的网页相册(一)(HTML+CSS+JS实现)
  16. c#ATM之功能篇(存钱,取钱,转账,交易明细)完结篇
  17. PTA 7-4 分钟秒钟的时间相减
  18. pandas中访问使用多个索引的Series
  19. 公众号PHP模板修改,PHP 实现发送模板消息(微信公众号版)
  20. linux用mpi运行命令,linux mpirun命令

热门文章

  1. 企业的任何方法均可融入敏捷技术
  2. sql range 范围内查询
  3. Linus Torvalds:回顾Linux20年
  4. 云计算中HMI的三大优点
  5. 2008R2Win7管理二十六ADRMS客户端使用及侦错
  6. ASP.NET 2.0 - 选用DataSet或DataReader
  7. Ubuntu18.10的chrome免输入密码
  8. 计算机系统基础:数字的机器表示
  9. qtp连接mysql 无驱动_QTP连接MySQL
  10. 机器学习(三十七)——Integrating Learning and Planning(3)