Font Awesome是一套应用于前端开发的图标【biāo】字体,能和Bootstrap搭配使用【yòng】。通【tōng】过CSS样式可改变【biàn】图标的颜色、大【dà】小阴影等效果,在不同【tóng】终端屏幕上【shàng】完美呈【chéng】现。Font Awesome是完全【quán】免【miǎn】费【fèi】的,无论是个人【rén】还【hái】是【shì】商业组织均可【kě】自由【yóu】使用。
Font Awesome图标字体库的使用
使用前先下【xià】载【zǎi】Font Awesome图标字体库,下【xià】载网址:http://www.bootcss.com/p/font-awesome,这里面【miàn】是Font Awesome 3.0版本,如果要使用最新版本可【kě】以到Font Awesome 中文网一下载。
复制【zhì】Font Awesome的CSS文件和字体放到【dào】指定的项目【mù】目录中【zhōng】;
在<head>闭合【hé】标签内使用link 加载【zǎi】font-awesome.min.css,如:
<link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">
在前端页面中使【shǐ】用时【shí】,都是通过简短的【de】标签<i>添加【jiā】class属于,设置css前缀和图【tú】标字体的具【jù】体名称。
<i class="fa fa-camera-retro"></i>
使用【yòng】 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x可改变【biàn】图标大【dà】小相对于它【tā】们的容器。
<i class="fa fa-camera-retro fa-2x"></i>
使用 fa-fw 来设置【zhì】图标【biāo】在一个固定宽度内,主要【yào】用于【yú】不同宽度【dù】图【tú】标无法对齐的情况,尤其在列表或导航时起到重要作【zuò】用【yòng】。
<i class="fa fa-home fa-fw" aria-hidden="true"></i>
使用 fa-ul and fa-li 轻松的【de】替换无【wú】序列表【biǎo】中的默认图【tú】标。
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>使【shǐ】用【yòng】列表类图标</li> <li><i class="fa-li fa fa-check-square"></i>轻松【sōng】的替换</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>无序列表</li> <li><i class="fa-li fa fa-square"></i>中的默认图【tú】标</li> </ul>
使【shǐ】用 fa-spin 使任意图标旋转,还【hái】可以使【shǐ】用 fa-pulse 使【shǐ】其进行【háng】8方位旋转。尤其适合 fa-spinner, fa-refresh, 和 fa-cog。
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>