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