WordPress给导航栏添加阿里ico图标
本文最后更新于 321 天前,文中的信息可能已经有所变化。如有误,请留言反馈。

见到过很多站长添加了导航栏图标,甚是好看,于是乎自己也在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是引入图标的代码,根据需要更换。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇