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