uni-app之阿里字体图标转base64方法
uni-app
之阿里字体图标转base64
方法
uni-app
开发过程中发现小程序端不能直接使用字体图标,需先转成base65
方可使用,转换方式如下。
一、转换步骤
1.1 从iconfont
下载字体图标文件
iconfont
官方网址:iconfont
-阿里巴巴矢量图标库
在“我的项目”中下载Font class
文件:
得到如下文件:
1.2 去transfonter.org
转换
转换地址:transfonter.org
得到的文件如下图所示:
1.3 使用
将1.2
中的iconfont.ttf
拷贝到项目中去,将1.1
中的iconfont.css
文件拷贝一份,将1.2
中的内容拷贝并替换iconfont.css
文件中的@font-face
内容(其余部分不做改变),将修改后的iconfont.css
文件拷贝到项目中使用。
具体使用方法:
<view class="iconfont icon-sousuo op-search"></view>.op-search {font-size: 36rpx;color: red;
}
iconfont
为固定的;icon-sousuo
为iconfont.css
文件中的字体图标名称;op-search
为自定义的字体图标样式,可以改变字体图标的大小与颜色等。
uni-app之阿里字体图标转base64方法相关推荐
- 如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地 然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
- 【uniapp引入阿里字体图标】
uniapp引入阿里字体图标 引入阿里字体图标 引入阿里字体图标 链接奉上 uni-app字体图标 阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- react引入阿里字体图标iconfont
移动端开发过程中,字体图标几乎是不可缺的,本文将介绍如何使用阿里字体图标,已方便练手的时候使用. 第一步:制作字体图标 1.首先进入阿里巴巴矢量图网站:http://www.iconfont.cn/ ...
- uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...
- vue中 使用element-ui 图标和阿里字体图标结合使用
vue中 使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
- 在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
- 阿里字体图标之Symbol用法
第一步:下载阿里字体图标Symbol文件包并解压. 第二步:把压缩后的文件全部放入自己的项目文件中. 第1步:引入项目下面生成的 symbol 代码: <script src="./i ...
- 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
最新文章
- java 远程共享_【原创】(扫盲)远程共享对象SharedObject的用法
- linux连接小米随身wifi密码忘记了,小米wifi管理员密码忘记了怎么办?
- SAP Payment Terms 付款条件
- 大促场景下云通信高可用、稳定性实战
- 小师妹学JVM之:JIT中的PrintAssembly
- Failed to instantiate [org.springframework.test.context.web.ServletTestExecute
- tornada-数据库
- [react] create-react-app有什么好处?
- 【LeetCode每日一题】2024. 考试的最大困扰度
- 问题 C: 编写函数:比较字符串 之一 (Append Code)
- viewport就是这回事
- DNS服务器的基本工作
- 第十三届蓝桥杯大赛个人赛全国总决赛准考证开放下载
- 【vbers】ibv_reg_mr|RDMA
- Android源码开发之蓝牙通知振动
- 电磁阀peakhold驱动
- 第三次作业(蒋鑫和贺俊朋组)
- 【强推文章】如果你在犹豫要不要去外包公司,不妨看看这篇文章(自己深有感触)
- 什么时候使用left join?
- android10.0(Q) Launcher3 去掉抽屉
热门文章
- 博弈论学习笔记(三)迭代剔除和中位选民定理
- arduino密码3x4控制_试玩 3X4矩阵按键 轻触薄膜按键模块 ARDUINO驱动测试
- Ehcache3 入门
- 【steam_api.dll下载】steam_api.dll放在哪
- 安卓Android家教平台软件app毕业设计
- 原创超简单代码(1.24.10)
- 10.1寸工业液晶屏G101EAN02.2-lvds工控屏
- 访问HTTPS请求遇到SSL信任问题
- Codeforces 575C 状压+KM
- 学习推荐:PS爱好者和设计师常看这些网站,实现自我提升