阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具。在这里你可以找到各种各样的图标并免费使用。那么,该如何给自己的WordPress博客加上阿里巴巴矢量图标库的图标呢?
登陆注册
打开阿里巴巴矢量图标库官网,手机号或者GitHub注册登录。
![图片[1]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/1ae3e8b148002947.jpeg)
搜索图标
自己通过搜索框找到自己喜爱的图标通通添加至购物车。
![图片[2]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/1aee84042e003653.jpeg)
然后再把购物车的图标加入到项目,如果还未创建项目,那就新建一个。
![图片[3]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/a5eb584aa0003713-590x1024.jpeg)
新建项目
修改一下项目名称,其他默认。然后点击新建。
![图片[4]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/a866316568003600.jpeg)
代码部署
使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这里推荐使用 Symbol 的方式集成到网站中。
第一步:点击查看在线链接(没有的话点击生成连接)然后再点击复制代码
![图片[5]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/a8f70a8dc8004538.jpeg)
第二步:将以下代码中的链接替换为您刚刚复制的链接,然后 进入“后台管理-主题设置-全局&功能-自定义代码-自定义底部HTML代码”粘贴后保存主题设置。
最后一步:在已经添加到你项目中的图标复制图标代码。
![图片[6]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/d65b85e8dc010430.jpeg)
然后按照下面的格式替换“iconxxx”中的图标代码,将替换后的代码插入到你需要显示图标的地方!
![图片[7]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享](https://xti.cc/wp-content/uploads/2022/12/b50810a62d011115-745x1024.jpeg)
温馨提示:本文章更新于
2022-12-18 02:01:22
,若有错误或已失效,请联系夏天。© 版权声明
网站名称:
夏天爱分享
永久域名:
https://xti.cc
侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:273841095删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
暂无评论内容