WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具。在这里你可以找到各种各样的图标并免费使用。那么,该如何给自己的WordPress博客加上阿里巴巴矢量图标库的图标呢?

登陆注册

打开阿里巴巴矢量图标库官网,手机号或者GitHub注册登录。

图片[1]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

搜索图标

自己通过搜索框找到自己喜爱的图标通通添加至购物车。

图片[2]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

然后再把购物车的图标加入到项目,如果还未创建项目,那就新建一个。

图片[3]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

新建项目

修改一下项目名称,其他默认。然后点击新建。

图片[4]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

代码部署

使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这里推荐使用 Symbol 的方式集成到网站中。

第一步:点击查看在线链接(没有的话点击生成连接)然后再点击复制代码

图片[5]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

第二步:将以下代码中的链接替换为您刚刚复制的链接,然后 进入“后台管理-主题设置-全局&功能-自定义代码-自定义底部HTML代码”粘贴后保存主题设置。

最后一步:在已经添加到你项目中的图标复制图标代码。

图片[6]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享

然后按照下面的格式替换“iconxxx”中的图标代码,将替换后的代码插入到你需要显示图标的地方!

图片[7]-WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享
温馨提示:本文章更新于2022-12-18 02:01:22,若有错误或已失效,请联系夏天
WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程-夏天爱分享
WordPress子比主题全站使用阿里巴巴Iconfont图标详细图文教程
此内容为付费阅读,请付费后查看
80积分
付费阅读
已售 130
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容