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是具体目标类名)

相关推荐
吹牛不交税4 分钟前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
Cobyte13 分钟前
AI全栈实战:使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
NEXT0626 分钟前
前端算法:从 O(n²) 到 O(n),列表转树的极致优化
前端·数据结构·算法
剪刀石头布啊32 分钟前
生成随机数,Math.random的使用
前端
剪刀石头布啊32 分钟前
css外边距重叠问题
前端
剪刀石头布啊33 分钟前
chrome单页签内存分配上限问题,怎么解决
前端
剪刀石头布啊35 分钟前
css实现一个宽高固定百分比的布局的一个方式
前端
剪刀石头布啊39 分钟前
js数组之快速组、慢数组、密集数组、稀松数组
前端
mango_mangojuice1 小时前
Linux学习笔记(make/Makefile)1.23
java·linux·前端·笔记·学习
Days20501 小时前
简单处理接口返回400条数据本地数据分页加载
前端