小程序不能识别外部字体文件，但是转换成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. vim使用技巧大全

    1.vim清空内容 光标移到第一行,然后在非插入模式按10000后然后点dd .要嫌笨的话就在非插入模式下输入:.,$d 一回车就全没了 2.vim光标跳转操作 1.跳到文本的最后一行:按“G”,即“ ...

  2. C# 集合、字典、栈和队列

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. angularjs 外部调用controller中的方法

    angular.element(document.querySelector('[ng-controller=mainCtrl]')).scope().viewGo('tab.VIPPay_Succe ...

  4. 阅读OReilly.Web.Scraping.with.Python.2015.6笔记---Crawl

    阅读OReilly.Web.Scraping.with.Python.2015.6笔记---Crawl 1.函数调用它自身,这样就形成了一个循环,一环套一环: from urllib.request ...

  5. 如何让classmethod只允许使用用类对象来调用

    Django REST framework里面有这样一段代码,在网上查@classonlymethod的意思是使得classmethod只允许使用用类对象来调用 @classonlymethod de ...

  6. 黄聪:C# webBrowser控件禁用alert,confirm之类的弹窗解决方案

    同样的代码,我尝试了很多次都没有成功.最后终于成功了,是因为我没有在正确的事件里面调用这段代码. private void InjectAlertBlocker() { HtmlElement hea ...

  7. modbus tcp 入门详解

    Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试   前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com ...

  8. Daubechies小波介绍

    Daubechies小波是正交.连续且紧支撑的. 正交条件下,$H(\omega)$必须满足下式: $|H(\omega)|^2+|H(\omega + \pi)|^2 =1$ 连续紧支撑条件下,$H ...

  9. C++11--正则表达式<regex>

    /* 正则表达式:一个指定的模式用来对文本中的字符串提供精确且灵活的匹配 */ #include <regex> using namespace std; int main() { str ...

  10. window下sh文件在linux转码

    本文转载自:https://blog.csdn.net/omiconlee/article/details/53407438 1)在Windows下转换: 利用一些编辑器如UltraEdit或Edit ...