本文最后更新于 472 天前,文中的信息可能已经有所变化。如有误,请留言反馈。
见到过很多站长添加了导航栏图标,甚是好看,于是乎自己也在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是引入图标的代码,根据需要更换。