由于微信小程序不支持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. [CSP-S模拟测试]:赤壁情(DP)

    前赤壁赋 壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下.清风徐来,水波不兴.举酒属客,诵明月之诗,歌窈窕之章.少焉,月出于东山之上,徘徊于斗牛之间.白露横江,水光接天.纵一苇之所如,凌万顷之茫然.浩浩 ...

  2. [CSP-S模拟测试]:小奇的仓库(warehouse)(树形DP)

    题目背景 小奇采的矿实在太多了,它准备在喵星系建个矿石仓库.令它无语的是,喵星系的货运飞船引擎还停留在上元时代! 题目描述 喵星系有$n$个星球,星球以及星球间的航线形成一棵树.从星球$a$到星球$b ...

  3. 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...

  4. 2018-2019-2 《Java程序设计》第11周学习总结

    20175319 2018-2019-2 <Java程序设计>第11周学习总结 教材学习内容总结 本周学习<Java程序设计>第十三章java网络编程: - URL类 URL类 ...

  5. 使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory

    通过nsenter 进入到docker容器的后端总是报下面的错,, [root@devdtt ~]# docker inspect -f {{.State.Pid}} mynginx411950 [r ...

  6. POJ 1410 Intersection (计算几何)

    题目链接:POJ 1410 Description You are to write a program that has to decide whether a given line segment ...

  7. lvm 磁盘扩容

    LVM磁盘管理 一.LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘 ...

  8. How to compile Linux kernel in fedora 6

    前提:已裝好Fedora 6 core 2.6.18 ,在 Fedora 6 中compile linux kernel.1.下載 Fedora 6 core 2.6.18 http://www.ke ...

  9. Java接口自动化测试实战笔记

    综述 代码管理工具Git 测试框架 TestNG 测试报告 Mock 接口框架 HTTP 协议接口 测试框架 HttpClient SprintBoot 自动化测试开发 数据持久层框架 MyBatis ...

  10. Python之基本的日期与时间转换 datetime、 dateutil模块

    简单举例datetime模块 from datetime import timedelta,datetime a = timedelta(days=2, hours=6) b = timedelta( ...