WordPress为导航菜单添加fontawesome图标

许多朋友看到演示站的菜单有图标,不管是显示还是美观都有一定的效果,在这里,我介绍一下如何添给菜单添加fontawesome图标,也就是经常说的 fa fa图标。

当主题支持时直接引用

现在有好多主题都已经支持使用fontawesome图标了,开发者已经将使用图标时需要调用的库文件添加到源代码中,这个时候只需要在需要显示图标的地方添加如下代码即可:

<span><i class="fa fa-home"></i> 首页</span>
  • 图标代码是用<span>标签包裹起来的,这样会避免个别情况下不对齐问题
  • </i> 后面,有一个空格,这样做的原因是图标和文字不会太拥挤
  • 具体要用什么图标,可以到fontawesome官网去查找即可,将自己喜欢的图标代码替换即可
  • <span><i class=”fa fa-图标代码”></i> 菜单名称</span>

当主题不支持时

当主题默认不支持添加图标时,我们就需要手动引入这个图标库,引入图标库后就可以像上面说的一样,直接插入图标。

方法1:BootstrapCDN

将以下代码粘贴到网页HTML代码的 <head> 部分

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

方法二:使用默认CSS

复制整个 font-awesome 文件夹到您的项目中。

在HTML的 <head> 中引用font-awesome.min.css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

代码说明

默认的添加图标的代码是:

<i class="fa fa-图标代码"></i>

我们可以自定义图标的大小:

<i class="fa fa-图标代码 fa-lg"></i> fa-lg
<i class="fa fa-图标代码 fa-2x"></i> fa-2x
<i class="fa fa-图标代码 fa-3x"></i> fa-3x
<i class="fa fa-图标代码 fa-4x"></i> fa-4x
<i class="fa fa-图标代码 fa-5x"></i> fa-5x

更多进阶教程可以到官网进行了解

人已赞赏
WordPress教程

WordPress教程 - 修改文件的默认上传位置

2020-7-31 10:05:22

WordPress教程

WordPress技巧 - 修改默认的Gravatar头像

2020-8-2 10:57:33

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索