
许多朋友看到演示站的菜单有图标,不管是显示还是美观都有一定的效果,在这里,我介绍一下如何添给菜单添加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
更多进阶教程可以到官网进行了解