Uniapp 添加Iconfont
1:创建/font/iconfont.css
在线方式:
@font-face {font-family: "iconfont"; /* Project id 3266214 */src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype');
}
离线方式:
@font-face {font-family: "iconfont"; /* Project id 3266214 */src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
2:引用
App.vue中 添加
<style>@import './font/iconfont.css';
</style>
3:使用
<icon class="iconfont icon_ts "></icon>
设置大小
font-size:xxx
Uniapp 添加Iconfont相关推荐
- uniapp引用iconfont图标
不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...
- angular 使用ng-zorro添加iconfont图标
angular 使用ng-zorro添加iconfont图标 在本文章我使用的是symbol的方式,你也可以使用fontClass或者unicode方式,但据官方原话来说,symbol是以后的主流 方 ...
- uniapp添加顶部导航栏并且使用iconfont图标
一.在阿里矢量图选择自己喜欢的图标,然后点击收藏 二.右上角下载全部已经收藏了的图标代码 三.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里,然后再打开ic ...
- 【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决,移动端引入报错解决】
前言 为什么要使用阿里图标库: 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
- uniapp使用iconfont字体图文教程
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一.iconfont官网注册 二.使用 1.选择官方图标库 2.找到要用得字体图标加入购物车 3.添加到项目 4.生成网络地 ...
- uniapp添加顶部导航栏颜色渐变
在uniapp文件夹的pages.json文件中添加如下代码即可实现 "backgroundImage":"linear-gradient(to right, #FFDE ...
- uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
- uniapp添加网站favicon文件
前言 uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 "机会",但其实官方已经给出解决方法了,使用的是 自定义模板 自定义模板的场景,通常有以下几种情况: ...
- uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...
- uni-app 使用 iconfont
根据官网 小于 40kb 的字体文件可以直接本地引用. 方法如下: 首先下载字体文件. 然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用. 放入到 s ...
最新文章
- html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...
- 维基解密揭秘CIA五种恶意软件用法
- 感情沟通出了问题要怎么解决_冬养的月季花枝条干枯,开花萎蔫,哪里出了问题,该怎么解决?...
- 贪心算法———房间搬桌子
- PIL库自我学习总结及应用(美白,磨皮,搞笑图片处理)
- Linux 命令之 type -- 显示指定命令的类型
- 整数线性规划实现(matlab分枝界定法)
- php this db get,php – Codeigniter $this- db- get(),如何返回特定行的值?
- 借助FLASH技术美化VBA操作界面
- 善用assert函数
- jquery,字符串转json对象,json对象转字符串
- 参考答案+实验设计与分析(第6版) [Design and analysis of experiments] - 蒙哥马利(Montgomery D.C)
- weblogic安装配置教程
- 程序化广告(2):程序化广告的参与者
- 服务器打开xlsm文件,XLSM 文件扩展名: 它是什么以及如何打开它?
- bzoj千题计划268:bzoj3131: [Sdoi2013]淘金
- 用计算机画画的优质课,小学信息技术优质课和画图工具教案.doc
- 网络信息安全运营方法论 (上)
- Android vivo手机无法调试安装Apk的解决办法
- python 调用qrcode库实现二维码识别
热门文章
- 【SuperMap】SuperMap.Geometry转GeoJSON
- 常用报表开发工具介绍
- Error 遇到错误:请求通道在等待 00:01:00 以后答复时超时。增加传递给请求调用的超时值,或者增加绑定上的 SendTimeout 值。分配给此操作的时间可能已经是更长超时的一部分
- OneZero第一次站立会议Sprint Planning Meeting(2016.3.21)
- Global land use changes are four times greater than previously estimated
- linux计时器命令,安装及使用Linux终端倒数计时器Countdown的方法
- Mocking and Stubbing
- 满腔热诚永不忘,我以我血荐轩辕!
- 关于【野火】OV7725例程移植【OV7670】总结
- 手摸手,带你用vue撸后台 系列一(基础篇)