• 欢迎访问圣洁的白莲!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

wordpress导航添加个性图标

WordPress 菜根譚 6个月前 (05-25) 92次浏览 未收录 0个评论 扫描二维码

wordpress导航添加个性图标

默认的wordpress导航是没有图标的,这样看起来十分难看,下面讲解如何使用fontawesome站点的图标和使用插件Menu Icons给你的导航添加菜单图标。

menu icons

在外观->菜单->编辑菜单,我们可以选择从哪里添加图标:

wordpress导航添加个性图标

点击 Select icon 会弹出非常简单高效的图标设置界面,总共可以选择五组图标,分别是 Dashicone,Elusive,Font Awesome , Genericons和Image,建议所有的菜单只用其中的一组,可以使图标显得整齐划一;其中的Image是选择网站的多媒体库中图片做图标

wordpress导航添加个性图标

选择一个图标之后你可以设置图标的大小、相对位置、在文字的前后和是否直接替换文字,功能非常方便和强大。

wordpress导航添加个性图标

menu icons插件地址:https://wordpress.org/plugins/menu-icons/

fontawesome站点的图标

我们除了使用插件,还可以使用fontawesome站点免费 提供的CSS图标。

打开fontawesome的网站:http://www.fontawesome.com.cn/  

wordpress导航添加个性图标

wordpress导航添加个性图标我们在图标库那里可以选择所要选择的图标种类:

wordpress导航添加个性图标

我在这里选择一个wordpress的图标:

wordpress导航添加个性图标

我们可以选择图标名称或者选择源码

wordpress导航添加个性图标

我在这里就复制源码,然后粘贴到导航标签中:

wordpress导航添加个性图标

点击保存菜单就OK了。

下面,我们就去查看设置好的导航菜单图标:

wordpress导航添加个性图标

图标旋转

下面,再给大家介绍如何使添加的图标旋转。

在主题的 css 中加如下代码:

.fa-spin {animation: 2s linear 0s normal none infinite running fa-spin;}

然后再菜单里,将.fa-spin添加到菜单中。然后就可以看到图标旋转了!

<i class="fa fa-wordpress fa-spin"></i>菜单名称

 本教程参考:https://wuzuhua.cn/2018/12/18/66666.html


圣洁的白莲 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:wordpress导航添加个性图标
喜欢 (3)
[]
分享 (0)
关于作者:
浩瀚学海,虔诚分享!

您必须 登录 才能发表评论!