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

相关推荐
毛骗导演几秒前
@tencent-weixin/openclaw-weixin 插件深度解析(二):消息处理系统架构
前端·架构
IT_陈寒18 分钟前
深入理解JavaScript:核心原理与最佳实践
前端·人工智能·后端
MrGud23 分钟前
Cesium中的坐标系及其转换
前端·cesium
小付学代码24 分钟前
香港地图可编辑版
前端
兆子龙36 分钟前
TypeScript高级类型编程:从入门到精通
前端·后端
SuperEugene38 分钟前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
IT_陈寒44 分钟前
Python开发者的效率革命:这5个技巧让你的代码提速50%!
前端·人工智能·后端
Luna-player1 小时前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
用户69371750013841 小时前
不卷AI速度,我卷自己的从容——北京程序员手记
android·前端·人工智能