本站设计-全站使用阿里巴巴Iconfont图标详细图文教程

子比主题已经集成了Font Awesome 图标,您可以在全站使用Font Awesome图标而无需任何插件。

要使用Font Awesome图标教程十分简单,如图所示,仅需两步:

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图1

具体方法请参看:在菜单插入图标教程

Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录,数百万的图标免费使用,官方也提供了详细的教程

一、新建Iconfont项目

接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

Iconfont 支持GitHub帐号登录,登录之后你就可以寻找自己需要的图标啦

首先呢,寻找自己的需要的图标,通通点进购物车!

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图2

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

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图3

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图4

二、网站集成

使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这三种集成方式各有优劣势,具体请查看 官方教程

这里我推荐使用 Symbol 的方式集成到网站中,当然你也按照官方的教程使用其它方式集成

第一步:将刚刚新建的项目生成 Symbol 接入链接,并复制

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图5

第二步:将代码保存到主题设置

<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>
本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图6

简单吧!网站集成 Iconfont图标 就已经全部搞定了!接下来就是使用 Iconfont图标 了!

提醒:请勿直接将代码写入到主题源码,已更新就没了。

三、使用 Iconfont图标

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

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>

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

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图7

复制图标代码

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图8

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图9
在导航菜单中插入

是不是很简单啊,接下来我我们再试试在文章中插入

使用古腾堡编辑器需要将内容转换为HTML编辑,然后再复制图标代码:

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图10
先转换为HTML编辑
</p><svg class="icon" aria-hidden="true"><use xlink:href="#iconwordpress1"></use> </svg><p>

使用经典编辑器也是需要先转为HTML编辑,再将图标代码复制到所需位置:

主题设置中的部分内容也是支持的喔!例如在加载更多的文案中插入

本站设计-全站使用阿里巴巴Iconfont图标详细图文教程 插图11

图片[13]-Wordpress全站使用阿里巴巴Iconfont图标详细图文教程-Zibll子比主题
温馨提示:本文最后更新于2022-12-15 00:00:04,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞29赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容