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

相关推荐
new code Boy19 小时前
escape谨慎使用
前端·javascript·vue.js
奶球不是球19 小时前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
叠叠乐19 小时前
robot_state_publisher 参数
java·前端·算法
Kiri霧19 小时前
Range循环和切片
前端·后端·学习·golang
小张快跑。19 小时前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet
小白阿龙19 小时前
Flex布局子元素无法垂直居中
前端
秋田君20 小时前
前端工程化部署入门:Windows + Nginx 实现多项目独立托管与跨域解决方案
前端·windows·nginx
江城开朗的豌豆20 小时前
阿里邮件下载器使用说明
前端
半兽先生20 小时前
Web 项目地图选型指南:从 Leaflet 到 MapTalks,如何选择合适的地图引擎?
前端