我爱幽兰异众芳,不将颜色媚春阳。
西风寒露深林下,任是无人也自香。

WordPress主题导航栏添加阿里巴巴矢量ico图标


本文共计592个字,预计阅读时长需要2分钟。

第一步,先去Iconfont-阿里巴巴矢量图标库注册一个账号进行下载图标,目前能够登陆的方式只有一下三中但实际上我们能用的也只有两种登陆方式。

二,注册登陆成功后建立一个项目

三,找到自己想要的图标选择添加入库,然后添加进我的项目里

四,进入新建的项目里面选择 Symbol 选项,点击红色的“点此复制代码”选项,替换掉以下代码的“这里添加项目里面复制出来的代码”;

<!--阿里iconfont引入JS-->
<script type='text/javascript' src='这里添加项目里面复制出来的代码'></script>
<!--阿里iconfont引入CSS-->
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

将上面替换好的代码放入主题目录下header.php文件的标签前。

五,最后在自己的主题设置里面的外观>菜单>导航标签栏目内添加以下代码:

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-Home"></use></svg>此处填写栏目名

#icon-Hom是引入图标的代码,根据需要更换。(用自己项目里面的图标代码进行替换)

赞(0) 打赏
转载请注明来源:微百知博客 » WordPress主题导航栏添加阿里巴巴矢量ico图标
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏