前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >阿里图标库引入图标

阿里图标库引入图标

作者头像
傲绝
发布2023-03-13 09:02:05
2.7K0
发布2023-03-13 09:02:05
举报
文章被收录于专栏:傲绝

文章引入

比wordpress默认图表库的图标好看多的 默认图标库的图标一般都是灰白色简直难看死了哈哈 今天分享给大家如何插入阿里图标库的彩色图标 阿里图标库有什么好处呢 插入方便 图标样式多 彩色图标应有尽有 反正你用都用不完 重点还永久免费使用

引入方法

第一步:阿里巴巴矢量图标库官网 —> Github或者新浪微博登录 第二步:然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目

第三步:跳转到我的项目 页面(没有跳转的点击–>资源管理–>我的项目)//我的项目自己创建名字

第四步:在 我的项目 页面有一下按钮—>一般选 Symbol

第五步:点击 –> 查看在线链接(没有的的话可以点击生成链接) —>点此复制代码(代码例如下面)

代码语言:javascript
复制
//at.alicdn.com/t/font_2931246_we7ddtq72go.js

第六步:引入JS代码

在当前主题设置—>自定义底部代码—>添加下面代码:(下面src=”这里是上面的JS代码,自行替换”)

代码语言:javascript
复制
<script src="//at.alicdn.com/t/font_2931246_we7ddtq72go.js">
</script>

使用图标 在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"中的图标代码,将代码插入到你需要显示图标的地方!

代码语言:javascript
复制
<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use>
</svg>

还是按照在导航菜单中添加图标为例:

最后我们看看效果吧!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023 年 03 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章引入
  • 引入方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档