小程序不能识别外部字体文件,但是转换成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. MongoDB从3.0.6升级到MongoDB3.4.9

    最初进入公司的时候,有些爬虫数据需要存储在mongo数据库里面,当时看到最新的数据库版本是3.0.6,现在公司开展了新的项目需要使用到Mongo,使用到了Mongo的一些表关联查询的方法,但是只有在最 ...

  2. Zookeeper命令行auth,digest

    一.auth auth:user:pwd:cdrwa digest:user:BASE64(SHA1(PWD)):cdrwa addauth digest user:pwd 增加用户和密码都是zhan ...

  3. HanLP极致简繁转换详细讲解

    HanLP极致简繁转换详细讲解 作者: hankcs(大快高级研究员 hanlp项目负责人) 谈起简繁转换,许多人以为是小意思,按字转换就行了.事实上,汉语历史悠久,地域复杂,发展至今在字符级别存在“ ...

  4. locate命令详解

    Linux locate命令 locate(locate) 命令用来查找文件或目录. locate命令要比find -name快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/ml ...

  5. oracle rac的启动与停止

    引言:这写篇文章的出处是因为我的一名学生最近在公司搭建RAC集群,但对其启动与关闭的顺序和原理不是特别清晰,我在教学工作中也发现了很多学员对RAC知识了解甚少,因此我在这里就把RAC里面涉及到的最常用 ...

  6. MySQL 快速构造一亿条记录的表

    在上一次朋友问我如何快速构造一亿条记录的表后,我理出了实行的办法,见:http://blog.csdn.net/mchdba/article/details/52938114,但是因为录入一亿表需要2 ...

  7. C# 调用Sql server 执行存储过程总是返回-1

    调用存储过程代码如下: 今天在写存储过程调用时遇到如下问题: int value = cmd.ExecuteNonQuery();//执行总是返回-1:且存储过程在sql 可视化执行窗口可正常执行-- ...

  8. 黄聪:jquery.bootgrid表格插件有的属性(visibleInSelection、cssClass、headerCssClass、headerAlign)不能识别的解决办法

    主要是属性大小写问题,修改jquery.bootgrid.js文件,在function loadColumns()方法里面添加下面的语句就好了 data.headerAlign = data.head ...

  9. Qt学习——QListWidget控件的使用

    转载:GDUTLYP Qt提供QListWidget类列表框控件用来加载并显示多个列表项.QListWidgetItem类就是列表项类. 一般列表框控件中的列表项有两种加载方式: 一种是由用户手动添加 ...

  10. PAT 乙级 1076 Wifi密码 (15)

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用wifi,又怕耽误亲们的学习,现将wifi密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一换.谢 ...