IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Uniapp 添加Iconfont -> 正文阅读

[JavaScript知识库]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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-24 00:26:06  更:2022-03-24 00:28:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 5:07:11-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码