微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了。
以阿里巴巴的iconfont为例
1.下载图标
先去官网下载喜欢的图标==》
下载解压后的文件夹==》
2.在线转换
打开https://transfonter.org/这个网站,将ttf格式的图标文件转换为base64的
完成之后,下载
3.添加css文件
下载好之后的css文件
复制到需要引用的wxss文件中(全局调用就放到app.wxss中);
复制原始css文件中的以下内容到上面的相同文件中:
4.调用
效果:
备注:
关于第三步:
不一定全局引用复制;也可以单独注册成wxss文件,@import引入;
关于第四步:
引用方式很多,不限于以上示例方式~
微信小程序中使用iconfont/font-awesome等自定义字体图标的更多相关文章
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
- 微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...
随机推荐
- Linux复制粘贴快捷键
1. 在终端下: 复制命令:Ctrl + Shift + C 组合键.粘贴命令:Ctrl + Shift + V 组合键. 2. 在控制台下: 复制命令:Ctrl + Insert 组合键 或 用鼠标 ...
- bzoj 2216 [Poi2011]Lightning Conductor——单调队列+二分处理决策单调性
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2216 那个关于位置的代价是带根号的,所以随着距离的增加而增长变慢:所以靠后的位置一旦比靠前的 ...
- Spring Cloud(Dalston.SR5)--Hystrix 断路器-缓存
在 Spring Cloud 中可以使用注解的方式来支持 Hystrix 的缓存,缓存与合并请求功能需要先初始化请求上下文才能实现,因此,必须实现 javax.servlet.Filter 用于创建和 ...
- Linux下安装uci
Compiling UCI as stand alone cd ~ git clone git://nbd.name/uci.git ~/uci cd ~/uci cmake -DBUILD_LUA= ...
- 简单谈谈JS数组中的indexOf方法
前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入 ...
- OpenTSDB(时序数据库官网)
官网地址:http://opentsdb.net/ 下载地址:https://github.com/OpenTSDB/opentsdb/releases ----------------------- ...
- WebService C#开发/调用
简单描述C#开发WebService操作步骤以及调用方式 WebService开发 第一步:创建Web空项目 第二步:为创建的Web空项目添加Web服务 第三步:实现WebService方法(仅供参考 ...
- Mysql 性能优化4 mysql参数配置
mysql 参数的介绍 大概450项参数,大多保持默认就可以了 错误的参数 崩溃,错误,运行缓慢. 参数最好在生产环境前配置好.最好不要在生产环境 中 直接配置,有可能不会立即生效,或者之前的数据和配 ...
- django1.10.3下admin后台管理老是显示object
在设置了一个新models phone book后,admin管理显示数据名称都是object 尝试为model重写__unicode__方法后无效,经查询,在py3环境中,需要重写__str__方法 ...
- elasticsearch 口水篇(6) Mapping 定义索引
前面我们感觉ES就想是一个nosql数据库,支持Free Schema. 接触过Lucene.solr的同学这时可能会思考一个问题——怎么定义document中的field?store.index.a ...