概要

在线转换地址：https://transfonter.org/
使用ttf文件转换base64
如果你在阿里矢量库下载了字体图标在项目引入无法显示时，可以把图标转成base64
如果你在阿里矢量库下载了字体图标不想以文件的形式使用，可以把图标转成base64
推荐在小程序/uniapp/移动端项目中使用

步骤简要

在阿里矢量库下载好字体图标，准备好ttf文件
打开在线转换地址
上传ttf文件，选择好相应的配置进行转换
下载转换好的文件，找到staylesheet.css文件中的base64代码
在项目中使用

步骤图解

9、拷贝代码

10、代码中的使用：

最后呈现的效果自己想吧~~~~~

阿里iconfont图标ttf转换为base64【非常详细】相关推荐

Hexo博客之优雅使用阿里iconfont图标
前言为什么写这篇文章? Font Awesome 无论是 v4 还是 v5 图标都有一些局限性.因此不少小伙伴想到了使用阿里 iconfont 图标.然而很多小伙伴并不是前端这个专业,可能对使用图标 ...
VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 Hexo系列文章已经完成上传: 一.Hexo准备-Node.js.Vue 二.Hexo.主题.部署上线三.Butterfly美化四.Hexo之更换背景及透明 ...
ant-design-vue自定义使用阿里iconfont图标
ant-design-vue自定义使用阿里iconfont图标 ant-design-vue与vue-admin-element引用iconfont图标还是有点区别的,具体步骤如下: 第一步:从ico ...
vue项目中如何使用阿里 iconfont图标
先登录阿里 iconfont 图标库:https://www.iconfont.cn/ 1.选择需要的图标添加到购物车中 2.在资源管理里面 --我的项目: 添加新项目这样的话就会永久保存了. 3. ...
接入阿里iconfont图标库详细教程
1:注册账号点击链接进入阿里iconfont官网,用手机号注册并登录. 2:创建项目 2.1:选择资源管理-我的项目 2.2:点击新建项目,填写项目名,其他的默认选择,点击新建即可. 2.4:也可以 ...
vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式兼容性较差,支持 ie9+,及现代浏览 ...
原生小程序实现阿里iconfont图标显示(保姆级图文)
1.点击阿里图标库 2.在阿里图标库选择自己需要的iconfont样式,只后点击加入购物车 3.点击右上角购物车图标后点击下载代码 4.代码下载完毕后如下文件 5.点击右键解压该文件,文件如下 6. ...

阿里iconfont图标ttf转换为base64【非常详细】

概要

步骤简要

步骤图解

10、代码中的使用：

阿里iconfont图标ttf转换为base64【非常详细】相关推荐

最新文章

热门文章