vue中 字体图标引入 - iconfont阿里字体图标库

官网:iconfont-阿里巴巴矢量图标库

代码应用中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推)、symbol(svg合集)。本文主讲 font-class 方法。

font-class引用

支持ie8+,及所有浏览器

1. 获得项目下面的 fontclass 代码

加入库 -> 选择完所需的图标后,右上角的购物车 -> 添加到项目 -> 自动跳转至 我的项目,点击Font class -> 点击复制代码(!!这个才是你项目的代码

2. 在项目的 index.html 文件中导入,链接为1.中的fontclass代码

<link rel="stylesheet" href="fontclass代码" />

3. 使用 - 在页面中,使用 <i class='iconfont icon-xxx'></i> 进行应用(其中,iconfont是基础样式类名,icon-xxx是具体目标类名)

相关推荐
琉璃℡初雪11 分钟前
vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件
vue.js·pdf·excel
Bl_a_ck12 分钟前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
为美好的生活献上中指38 分钟前
java每日精进 5.11【WebSocket】
java·javascript·css·网络·sql·websocket·网络协议
augenstern4161 小时前
webpack重构优化
前端·webpack·重构
海拥✘1 小时前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
寧笙(Lycode)2 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
asqq82 小时前
CSS 中的 ::before 和 ::after 伪元素
前端·css
拖孩2 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫2 小时前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
Hejjon2 小时前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js