微信小程序中怎么使用阿里图标库中的图标

我们知道，微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的，所以，以前我们可能会在css中使用阿里图标库，但是在微信小程序中使用阿里图标库，要做一些处理

阿里图标库（不会使用的底下留言）

1、下载好我们想要使用的图标，解压

2、打开iconfont.css 对其做一些处理

看下图是没处理之前的代码

我划红线的是base64格式的，画圈的是相对路径，删除掉相对路径，只保留base64格式的，删除后如下

ok，然后将其放在相应的css文件中，就可以使用了（使用方法和我们在html中使用的方式一样），不需要其他的文件哦！

<view class="tel"><text class="iconfont icon-dianhua1">电话：{{shop.shop_tel}}</text>
</view>

微信小程序中怎么使用阿里图标库中的图标相关推荐

【微信小程序控制硬件⑧ 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！（附带Demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果前言需求分析头部TAB 滑动的内容部分最终版本尾巴前言在做Android开发的时候,ViewPager是开发者使用频 ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题。
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题. 初学者怎么解决呢,建议尝试在设置(setting)_通用设置 _中更改语言,一般有"系统语言". ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序图片/视频直传阿里云服务器OSS
阿里云官方文档: https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj 第一步(需要由后 ...
微信小程序开发工具介绍及安装（中）
小程序开发工具的安装方法微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台.以下是关于Windows.macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍. ...
微信小程序开发环境（阿里云服务搭建+可运行的demo）
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...

微信小程序中怎么使用阿里图标库中的图标

微信小程序中怎么使用阿里图标库中的图标相关推荐

最新文章

热门文章