由于微信小程序不支持ttf字体，只支持base64的问题，需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图

需将图中箭头所指的字体文件通过 https://transfonter.org/    进行base64 处理

将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲stylesheet.css中的内容全部复制下来粘贴进新建好的iconfont.wxss文件中

然后将阿里图库下载下来的文件夹中的iconfont.css文件打开将其中部分代码复制粘贴至我们自己小程序中新建的iconfont.wxss文件中

自此，字体文件已经处理完成，只等我们在各个页面使用即可。处理完成的文件如下图所示

最后一步，在需要的界面进行使用，前提是需要将我们处理后的iconfont.wxss文件引入到小程序根目录下的app.wxss文件进行全局引入。如下图引入即可

引入完毕后即可在任意界面进行使用了，使用方式如下

参考博客：https://blog.csdn.net/hdchangchang/article/details/83511007

微信小程序中使用阿里ICON图标的更多相关文章

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

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

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

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

  3. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

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

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

  5. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  6. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

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

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

  8. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  9. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

随机推荐

  1. Golang操作MySQL的正确姿势

    封装原因: 查看了很多网上提供的ORM类型的数据库操作,觉得比较麻烦,需要提前配置很多的表结构体,然后才能使用,对于数据表很多的项目就配置起来就比较麻烦,所以对golang的mysql包进行了外层包装 ...

  2. （转）ping: www.baidu.com: Name or service not known centos7 -bash: ifconfig: command not found

    [root@mysqlcentos01 ~]# ping www.baidu.com ping: www.baidu.com: Name or service not known [root@mysq ...

  3. Linux 下 VIM 的操作

    其实VI 和vim本质上没有多大区别,,但是VIM 可以高亮关键字,使得更受青睐 vim里面有3种模式:命令模式,编辑模式,末行模式 1. vim--->:set number VIM 打开文档 ...

  4. Nuget-Doc：Nuget 简介

    ylbtech-Nuget-Doc:Nuget 简介 1.返回顶部 1. NuGet 简介 2019/05/24 适用于任何现代开发平台的基本工具可充当一种机制,通过这种机制,开发人员可以创建.共享和 ...

  5. 小程序UI自动化（一）：appium小程序自动化尝试

    appium 进行 小程序自动化尝试: 由于工作中进行app自动化用的是appium,故首先尝试用appium进行小程序自动化,以美团小程序为例(python脚本实现) 一.配置基础信息 启动微信ap ...

  6. HDU 1028 Ignatius and the Princess III (动态规划)

    题目链接:HDU 1028 Problem Description "Well, it seems the first problem is too easy. I will let you ...

  7. java.lang -> Boolean

    java.lang -> Boolean 是什么 Boolean 类是将 boolean 基本类型进行包装.类型为 Boolean 的对象包含一个单一属性 value,其类型为 boolean. ...

  8. java反射(一)--认识反射机制

    一.认识java反射机制 在java语言中,之所以会有如此众多的开源技术支撑,很大的一部分来源于java最大特征--反射机制.能够灵活的去使用反射机制进行项目的开发与设计,才能够真正接触到java的精 ...

  9. 分布式系统架构常识：CAP理论。

    什么是CAP理论? 2000年7月,加州大学伯克利分校的Eric Brewer教授在ACM PODC会议上提出CAP猜想.2年后麻省理工学院的Seth Gilbert和NancyLynch从理论上证明 ...

  10. 下载Excel文件功能通过火狐浏览器下载没有后缀名

    最近遇到一个问题,用导出Excelwe文件使用Chrome浏览器是没有问题的,但是用火狐浏览器会出现下载的Excel文件没有后缀名.检查了很多东西都没找到原因.最后和之前的下载功能做对比发现,Exce ...