当前位置： 首页 > news >正文

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

news 来源：原创 2024/5/4 9:33:25

概要

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

步骤简要

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

步骤图解

image

9、拷贝代码
image

10、代码中的使用：
image
image

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

相关文章：

  • 浏览器输入url以后所经历的过程
  • linux中DNS原理详解
  • 原型链的简单理解【关系到结论】
  • Qt中实现渐变动画效果
  • DOM树的理解【面试常问】
  • h5适配的解决方案【1】
  • class命名及前端部分规范【解决命名的疑问】
  • 小程序中使用彩色图标（阿里iconfont）
  • 前端新手引导的简单实现【Intro.js插件】
  • javascript闭包的理解及应用场景
  • 数组、链表、Hash（转）
  • 【微信小程序】小程序授权登录偶发性的解密失败原因及解决方案
  • 第一种感想
  • 【支付】uniapp之app中的支付宝、微信支付的实现及orderInfo的说明
  • 简易定制 Debian 软件仓库
  • [译]前端离线指南（上）
  • 【Leetcode】104. 二叉树的最大深度
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列（实验阶段398-2018.11.14）...
  • bootstrap创建登录注册页面
  • CSS 提示工具(Tooltip)
  • docker python 配置
  • ES6 ...操作符
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Laravel深入学习6 - 应用体系结构：解耦事件处理器
  • MQ框架的比较
  • Python 基础起步 (十) 什么叫函数？
  • Tornado学习笔记（1）
  • WebSocket使用
  • 从PHP迁移至Golang - 基础篇
  • 复习Javascript专题（四）：js中的深浅拷贝
  • 关于Flux,Vuex,Redux的思考
  • 汉诺塔算法
  • 后端_MYSQL
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 开源SQL-on-Hadoop系统一览
  • 你不可错过的前端面试题（一）
  • 七牛云假注销小指南
  • 前端_面试
  • 区块链将重新定义世界
  • ＂无招胜有招＂nbsp;史上最全的互…
  • (14)Hive调优——合并小文件
  • （C语言）编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • （超详细）语音信号处理之特征提取
  • （附源码）小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (数位dp) 算法竞赛入门到进阶 书本题集
  • （四）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • .net 8 发布了，试下微软最近强推的MAUI
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .NET 将混合了多个不同平台（Windows Mac Linux）的文件 目录的路径格式化成同一个平台下的路径
  • .NET构架之我见
  • .NET简谈互操作(五：基础知识之Dynamic平台调用)
  • .NET正则基础之——正则委托
  • /3GB和/USERVA开关
  • @Autowired 与@Resource的区别