WordPress教程

WordPress给导航栏添加阿里ico图标

见到过很多站长添加了导航栏图标,甚是好看,于是乎自己也在chiser站长帮助下搞了一排彩色图标;起初是普通图标添加不进,后来误打误撞添加了阿里的ico图标。

效果如下:

实现步骤:

1.首先我们需要去Iconfont-阿里巴巴矢量图标库去新建一个项目,然后选择进自己的图标,点击购物车加入新建的项目即可;

2.进入新建的项目里面选择 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文件的</head>标签前。

3.在WordPress 后台 > 外观 菜单 >导航标签栏目内添加以下代码:

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

#icon-Hom是引入图标的代码,根据需要更换。

 

如需帮助,请加Q群99645186

We can do it.

WordPress外链自动添加GO跳转页面

上一篇

JS粒子特效:波动粒子效果

下一篇

你也可能喜欢

9 条评论

  1. 换了Mnews主题感觉比DUX更大方

    1. @Chiser丶 是的,但Mnews还有有BUG,最终可能会用JUSTNEWS。

  2. 阿里图标还是蛮好看的,也很丰富

    1. @闲鱼 对,可以说是琳琅满目了。

  3. 阿里的这个适量图标,确实很赞。

    1. @MAY的SEO博客 是的,好看 花样多。

  4. 感觉这个阿里适量图标显得网站号漂亮啊, 很高大上的感觉,瞬间提升了网站“颜值”!

    1. @频敏变阻器 是的,特别是彩色的,感觉舒服多了。

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
猫鼬 管理员
We can do it.
最近文章
  • * 没有更多文章了
  • TAGS

    WordPress给导航栏添加阿里ico图标

    长按储存图像,分享给朋友