uniapp小程序中使用base64格式的字体图标iconfont的详细步骤

2024-05-18 17:39:58

下图是uniapp官网中对uniapp中字体图标使用规范的描述
这是官网地址中的原文链接 uniapp官网原文
从官网中对uniapp中字体图标使用规范的描述里可以看出，uniapp中使用字体图标的方式有两种，一种是网络路径的字体图标，另一种就是base64格式的字体图标，本文只说明base64格式的字体图标的使用方法。

第一步下载iconfont图标

首先打开阿里巴巴矢量图标库阿里巴巴矢量图标库官网
选好想要的图标后进入我的项目页，点击‘下载至本地’按钮
下载下来是个压缩包，解压之后出现下面几个文件
好！第一步就已经完成了！

第二步将下载下来的文件转成base64格式

首先打开 transfonter.org，这是一个免费的转base64格式的网站
只用第一步下载下来的文件夹中的ttf格式的文件
将下载下来的压缩包解压得到下面三个文件
将第一步下载下来的文件夹中的这两个文件复制到项目中专门存放静态资源的文件夹中，该文件夹一般命名为static，当然，别的文件夹名也可以
打开转码完成的文件夹中的stylesheet.css文件，会看到如下内容
再打开已经复制到专门存放静态资源的文件夹中的iconfont.css文件，会看到如下内容
将iconfont.css文件中最上面的代码

@font-face {font-family: "iconfont"; /* Project id 3557841 */src: url('iconfont.woff2?t=1659191503158') format('woff2'),url('iconfont.woff?t=1659191503158') format('woff'),url('iconfont.ttf?t=1659191503158') format('truetype');
}

替换成stylesheet.css文件中的内容，下图是最终效果
最后只需在需要用到字体图标的页面中引入iconfont.css即可
注意！此处有个小坑，在@import url()的结尾处一定要加分号，否则引入无效，而且不会报错

uniapp小程序中使用base64格式的字体图标iconfont的详细步骤相关推荐

关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题
前言在 Vue 和 uni-app 的使用过程中,我们常使用到 v-show 与 v-if .但很多人在用时并不知道两者到底有什么区别,下面就由我来介绍下吧一.v-show v-show 是一个根 ...
小程序分包加载不同项目字体图标引用问题
小程序分包加载不同项目字体图标引用问题问题描述: 当主项目中使用了字体图标样式子项目中也使用了字体图标样式,如果2个项目的字体图标不来自同一个地址的引用,会存在字体图标乱码现象如商城中分包加载 ...
微信小程序中的json格式文件
JSON 是一种数据格式 ,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 相比于XML ,JSON格式最大的优点是易于人的阅读和编写,通常不需要特殊的工具,就能读懂和修改,是一种轻量级的 ...
微信小程序中使用Base64编码解码
创建js-base64.js文件 (function(global) {'use strict';var global = global || {};var _Base64 = global.Base ...
uniapp 在 H5、App、微信小程序中使用 svga 格式动画详细示例教程，附插件源码及示例源码（常见于网页直播刷礼物特效功能）
前言兼容 h5 网页,微信小程序和 App. 本文详细讲解在 uni-app项目中,如何实现 svga 格式动画的引入及展示. 组件源码及使用文档都有! 你直接复制本文的源码,即可得到封装好的 s ...
使用腾讯IM实现uni-app小程序中的客服聊天
一.安装依赖小程序项目: // IM 小程序 SDK npm install tim-wx-sdk --save // 发送图片.文件等消息需要的 COS SDK npm install tim-u ...
微信小程序中显示html格式内容的方法
小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. s1.下载wxparse(链接:https://pan.baidu.com/s/1htm ...
小程序图片转换Base64格式的三种方法
一.使用小程序自带的网络请求 1.wx.request() 这种方式适合网络https路径图片,但无法解析wxfile://xxxx导致转化报错 image2Base64(imgUrl) {retur ...
uni-app小程序，将base64图片保存到本地相册
描述在做项目时,通过填写个人信息,生成一个二维码,现在要求将生成的二维码保存到本地,当点击图片上面的"保存到本地"时,就会将图片保存到本地相册里实现过程下面代码中的picUr ...

最新文章

热门文章