• 一个若白,若白博客,欢迎您的访问,若白博客将全速为您展示全网优秀文章。

  • 男人最无奈的大概就是在最无力的年纪遇见最想照顾一辈子的人

  • :evil:这一回可是真的要做好一个博客咯

    加油!

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

Wordpress 一个若白 3个月前 (07-16) 96次浏览 0个评论 扫描二维码
文章目录[隐藏]

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

效果如下:

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

实现步骤:

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

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

2.进入新建的项目里面选择 Symbol 选项,点击红色的“点此复制代码”选项,替换掉以下代码的“此处粘贴”;

  1. <!–阿里 iconfont 引入 JS–>
  2. <script type=‘text/javascript’ src=‘此处粘贴’></script>
  3. <!–阿里 iconfont 引入 CSS–>
  4. <style type=“text/css”>
  5. .icon {
  6. width: 1em; height: 1em;
  7. verticalalign: 0.15em;
  8. fill: currentColor;
  9. overflow: hidden;
  10. }
  11. </style>

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

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

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

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


若白博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress给导航栏添加阿里ico图标
喜欢 (0)
关于作者:
个人博客,高中生。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到