首页 > 网站 > 在WordPress博客菜单上添加动态图标

AI 摘要

本文介绍了如何在WordPress博客的菜单中添加动态图标。首先需要在主题头文件中引用font-awesome.css,然后在Fontawesome中文网上寻找所需的静态图标,复制图标代码并将其粘贴到菜单的选项中,同时添加所需的文本。若要添加动态图标,则需要在头文件中引用另一段CSS代码,然后在Font Awesome Animation网站上找到所需的动画效果,并调用代码实现。

添加图标

添加代码

首先在主题的头文件引用font-awesome.css

<link rel="stylesheet" href="https://code.bdstatic.com/npm/font-awesome@4.7.0/css/font-awesome.min.css">

食用

首先去这个网址:Fontawesome 中文网寻找图标。

在WordPress博客菜单上添加动态图标插图

找到了想要的之后,点击把复制源码前面的代码全部复制下来(点那个复制源码是没用的哦)

在WordPress博客菜单上添加动态图标插图1

复制完之后,在外观中找到菜单,打开。

在WordPress博客菜单上添加动态图标插图2

选择需要的页面,把刚刚复制的代码粘贴过来(空格后加上文字)

在WordPress博客菜单上添加动态图标插图3
<i class="fa 名称"></i> 文字

动态图标

添加代码

在主题的头文件引用一个CSS,代码如下:

<link rel="stylesheet" href="https://code.bdstatic.com/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">

食用

首先去到这个网站:Font Awesome Animation,找到自己喜欢的动画

在WordPress博客菜单上添加动态图标插图4

然后如图所示,调用

<span class="faa-parent animated-hover"><i class="fa 图标 动作名"></i> 首页</span>
在WordPress博客菜单上添加动态图标插图5

END

相关文章