小程序不能识别外部字体文件，但是转换成Base64就可以使用字体图标了。

以阿里巴巴的iconfont为例

1.下载图标

先去官网下载喜欢的图标==》

下载解压后的文件夹==》

2.在线转换

打开https://transfonter.org/这个网站，将ttf格式的图标文件转换为base64的

完成之后，下载

3.添加css文件

下载好之后的css文件

复制到需要引用的wxss文件中（全局调用就放到app.wxss中）；

复制原始css文件中的以下内容到上面的相同文件中：

4.调用

效果：

备注：

关于第三步：

不一定全局引用复制；也可以单独注册成wxss文件，@import引入；

关于第四步：

引用方式很多，不限于以上示例方式~

微信小程序中使用iconfont/font-awesome等自定义字体图标的更多相关文章

  1. 如何在微信小程序中使用iconfont

    开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...

  2. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  3. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  4. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  5. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  6. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  7. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  8. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  9. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

随机推荐

  1. docker 容器时间跟宿主机时间同步

    docker 容器时间跟宿主机时间同步 docker cp /etc/localtime 87986863838b:/etc/docker cp /etc/localtime container-na ...

  2. 六、springboot（三）配置双数据源

    1.目录结构 2.jdbc.properties配置 #db houge spring.datasource.houge.jdbc-url=jdbc:oracle:thin:@:ORCL spring ...

  3. 利用event为z数据表定期添加和删除分区

    我们去年就开始把zabbix数据库改成用TokuDB来支撑,并且启用了表分区(详情见:迁移Zabbix数据库到TokuDB).这样做的好处很明显,较早的历史数据可以通过删除分区快速废弃掉.要知道,za ...

  4. JScript 正则表达式语法表

    字符 描述 \ 标记下一个字符是特殊字符或文字.例如,"n" 和字符 "n" 匹配."\n" 则和换行字符匹配.序列 "\\&qu ...

  5. npm yarn安装包

  6. 关于Java与Map的那点事

    Java将Map拼接成“参数=值&参数=值”: 把一个map的键值对拼接成“参数=值&参数=值”即“username=angusbao&password=123456”这种形式 ...

  7. Osip2和eXosip协议栈的简析

    Osip2是一个开放源代码的sip协议栈,是开源代码中不多使用C语言写的协议栈之一,它具有短小简洁的特点,专注于sip底层解析使得它的效率比较高. eXosip是Osip2的一个扩展协议集,它部分封装 ...

  8. 学习笔记之pandas

    Python Data Analysis Library — pandas: Python Data Analysis Library https://pandas.pydata.org/ panda ...

  9. lucene索引查看工具luke和文本提取工具Tika

    luke可以方便的查看lucene的索引信息,当然也可以查看solr和es中的索引信息(基于lucene实现). 查看索引前,要注意lucene版本的问题,高版本的lucene用低版本的luke工具就 ...

  10. 集合之map详解(遍历)

    13.简单介绍Map 12.Map排序(TreeMap的key排序,TreeMap的value排序:HashMap的value排序:) 11.map集合的6种遍历方式  ============= 2 ...