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