阿里symbol图标:引入+使用方法
来源:互联网 发布:微信淘宝客机器人软件 编辑:程序博客网 时间:2024/05/21 21:02
前言:
记录阿里symbol图标的引入+使用方法
第一步:
进入阿里图标库Iconfont:http://www.iconfont.cn/,并登录
第二步:
选择需要的图标后加入购物车,并在购物车里将图标添加至项目
第三步:
获取项目下面生成的symbol代码或将项目下载至本地,并引入到html文件
第四步:
加入通用css代码(引入一次就行):
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>
第五步:
使用挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use></svg>
注:svg里的use标签引用你所需要的symbol图标的名字即可
阅读全文
0 0
- 阿里symbol图标:引入+使用方法
- vue内如何引入阿里图标
- 阿里字体图标使用方法——unicode引用
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
- 阿里iconfont图标使用
- MUI 如何引入阿里矢量图
- 关于前端引入icon图标
- ionic3的自定义图标引入
- vue中引入iconfont图标
- 阿里云OSS使用方法
- 阿里图标库的使用方法
- CTreeCtrl图标使用方法
- CTreeCtrl图标使用方法
- CTreeCtrl图标使用方法
- CTreeCtrl图标使用方法
- CTreeCtrl图标使用方法
- iconfont图标使用方法
- CTreeCtrl图标使用方法
- 互联网企业常说的“羊毛出在狗身上,猪来买单”是什么意思?
- usb disconnect
- [DeeplearningAI笔记]神经网络与深度学习4.深度神经网络
- 程序员神一样的存在:JavaScript 乱码艺术
- 【算法】最近点对问题(暴力破解法)
- 阿里symbol图标:引入+使用方法
- Java中的引用和指针
- C++PAT旧键盘
- 【Struts】数据回显
- 顺序表应用6:有序顺序表查询
- 查找操作------顺序查找
- 阿里展示首个IDC智能机器人 实现人机合作
- Java集合知识-笔记二
- 面向对象理解