阿里图标库引入图标
阿里 引入 图标 图标库
2023-06-13 09:17:24 时间
文章引入
比wordpress默认图表库的图标好看多的 默认图标库的图标一般都是灰白色简直难看死了哈哈 今天分享给大家如何插入阿里图标库的彩色图标 阿里图标库有什么好处呢 插入方便 图标样式多 彩色图标应有尽有 反正你用都用不完 重点还永久免费使用
引入方法
第一步:阿里巴巴矢量图标库官网 —> Github或者新浪微博登录 第二步:然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目
第三步:跳转到我的项目
页面(没有跳转的点击–>资源管理–>我的项目
)//我的项目自己创建名字
第四步:在 我的项目
页面有一下按钮—>一般选 Symbol
第五步:点击 –> 查看在线链接
(没有的的话可以点击生成链接) —>点此复制代码
(代码例如下面)
//at.alicdn.com/t/font_2931246_we7ddtq72go.js
第六步:引入JS代码
在当前主题设置—>自定义底部代码—>添加下面代码:(下面src=”这里是上面的JS代码,自行替换”)
<script src="//at.alicdn.com/t/font_2931246_we7ddtq72go.js">
</script>
使用图标 在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"
中的图标代码,将代码插入到你需要显示图标的地方!
<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use>
</svg>
还是按照在导航菜单中添加图标为例:
最后我们看看效果吧!
相关文章
- 阿里笔试题解(2020.4.17场)
- AI大牛叶杰平、薄列峰加盟阿里达摩院,13位「扫地僧」还剩谁?
- Github已破百万!阿里最新开源《领域驱动设计核心之道》,太强了
- 阿里P9资深技术专家手把手教你如何读源码,错过它你将错过一个亿!
- 阿里大牛总结的Netty手册,面试再也不怕被问Netty了,奥利给
- 前方高能!阿里P8撰写的30W字TCP/IP协议进阶笔记:GitHub标星96k
- 阿里云ubuntu镜像下载_ubuntu最小镜像
- 阿里规约手动创建线程池,我为什么还继续使用Executors呢?
- 阿里终面:业务主表读写缓慢如何优化?
- 连接安全连接你的Linux服务器:阿里云远程工具(阿里云的linux远程)
- 阿里、华为、腾讯等云巨头进入贴面战
- 8 位阿里大 V 解密双 11 背后的技术力量
- 女员工被侵犯引出阿里大尺度“破冰文化”? 官方三年前已辟谣
- 阿里涉性侵男员工曾去字节面试 已被无限期终止招聘流程
- 本地环境中搭建阿里云Redis实例(本地连接阿里redis)
- 预告! 阿里云道哥:如何保卫“双十一” | 硬创公开课
- 阿里云张晓丹:为什么说金融上云不只是技术问题,还是经济问题?
- 专访 | 阿里iDST初敏博士和陈一宁博士:如何打破语音技术的落地怪圈