Font Awesome提供可缩放的矢量图标也叫图标字体,矢量图标的好处就是无论怎么缩放也不会失真,可以适应您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
特点
- 一个字库,675个图标
仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。 - 无需依赖JavaScript
Font Awesome完全不依赖JavaScript,因此无需担心兼容性。 - 无限缩放
无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。 - 免费
Font Awesome完全免费 - CSS
支持css效果,无论颜色效果、大小、阴影都可以简单实现 - 适应屏幕
Font Awesome不会对屏幕有任何影响
安装方法
方式1:BootstrapCDN (由MaxCDN提供)
将以下代码粘贴到网页HTML代码的 <head>
部分.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
方式2:复制整个 font-awesome 文件夹到主题文件夹中。(文件在文章结尾下载)
在HTML的 中引用font-awesome.min.css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
使用演示
fa-camera-retro
fa-lg (33%递增)
fa-2x
fa-3x
fa-4x
fa-5x
使用方法
如果需要换别的图标形状,要更换代码里对应的因为例如:
home <i class=”fa fa-home”></i>
<i class="fa fa-camera-retro"></i> fa-camera-retro <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x