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

相关推荐
Aphasia3117 分钟前
前端面试之页面渲染规则📖
前端·面试
星之卡比*12 分钟前
前端知识点---闭包(javascript)
开发语言·前端·javascript
东方芷兰20 分钟前
JavaWeb 课堂笔记 —— 03 Vue
java·前端·javascript·vue.js·笔记
二十秒的勇气27 分钟前
HarmonyOS:组件布局保存至相册
前端
luback1 小时前
页面编辑器CodeMirror初始化不显示行号或文本内容
前端·codemirror
爱的叹息1 小时前
关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署 的详细说明,涵盖从开发到生产部署的全流程
vue.js·spring boot·后端
一勺-_-1 小时前
Chrome浏览器和Microsoft Edge浏览器的导出收藏链接
前端·chrome·edge
无名之逆1 小时前
[特殊字符] 超轻高性能的 Rust HTTP 服务器 —— Hyperlane [特殊字符][特殊字符]
java·服务器·开发语言·前端·网络·http·rust
蘑菇头爱平底锅1 小时前
数字孪生-DTS-孪创城市-导览功能、虚拟现实
前端·数据可视化
一口一个橘子2 小时前
[ctfshow web入门] web40
前端·web安全·网络安全