WordPress菜单栏动态图标-通用图形图标设置方法

通用WP博客菜单栏图形图标

  1. 首先安装 Font Awesome 4 Menus 插件,并且启用(可点此下载 手工汉化的插件)。
    然后打开“外观”--“菜单”选项,点击右上角的“显示选项”,勾选“CSS类”。

(也可以不用插件,引入CSS即可)

  1. 然后在菜单选项中,在 “CSS类” 填入你想要的图标名称。
    可以在这个网站查找图标:Fontawesome 中文网
    注意:填写名称必须是 “fa” 与空格开头!

图标名使用方法参考:

  1. 最后保存菜单,在前台刷新就可以看到效果了!如果没有效果,换个图标试试哦!
  2. 可以不用插件,在主题头文件引用 font-awesome.css 然后按照下方 Sakura主题 修改即可
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

Sakura以及sakurairo主题

二者已经引用了 Fontawesome 所以直接 后台-外观-修改菜单 即可,找到你想要的图标参考如下填写

<i class="fa fa-fort-awesome"></i> 首页

wordpress菜单栏图标动态

我就知道你们肯定还不满意,那么来添加动态效果吧~

  1. 我们需要用到这个网站Font Awesome Animation,然后还需要在头部引用一个 CSS【Sakura 主题同样自带,此步跳过】

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">
  1. 然后找到你要的图标和想要的动画,继续修改 后台-外观-菜单,全部填到标题里

<span class="faa-parent animated-hover"><i class="fa fa-fort-awesome faa-horizontal"></i> 首页</span>

  1. 如果没有效果,换个图标和动画试试哦!

以上内容转载自雾时之森大佬

原文链接:https://m1314.cn/144.html

关于动画特效的小结

faa-horizontal:对应水平摇动

faa-vertical:垂直摇动

faa-shake:颤动

faa-tad:缩小放大效果

其他特效还有:faa-wrench、faa-pulse

常见的图标网站

http://www.fontawesome.com.cn/faicons/      fontawesome中文库:   

https://www.thinkcmf.com/font/icons  奥森图标库

上面两个基本上够用,何况咱们还有copy大招,看上谁的,F12解决(右键检查)

F12copy大法

选中你喜欢的图标,F12或者右键“检查”

copy就完了

建站插件·使用

Category Sticky Post—WordPress分类目录文章置顶

2020-10-18 13:08:51

VR其他实用建站生活经验·技巧

如何在文章中引入VR在线链接

2020-11-2 16:13:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索