响应式前端框架Bootstrap系列（10）字体图标和消息徽章

字体图标是bs框架中非常好用的一个功能，只要添加简单的样式，无需导入图标即可实现图标的显示。通常使用<span>渲染字体图标，并将该元素放置在<button>或<a>内。这个是bs提供的字体图标的地址：

http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

演示代码：

<div class="container">
	<!-- 字体图标的基本用法 -->
	<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
	  <span class="glyphicon glyphicon-globe"></span> User
	</button>
	<a href="#" class="btn btn-info btn-lg">
		<span class="glyphicon glyphicon-search"></span> Tree-deciduous
	</a>
</div>

效果图：

（注）字体图标大小、颜色等样式调整与调整字体样式一样，如用font-size和color。

（注）字体图片素材可以参考阿里巴巴的iconfont官网：http://www.iconfont.cn/

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航条等这些元素上即可。演示代码：

<div class="container">
			<div>
				<ul class="nav nav-pills">
					<li class="active">
						<a>新闻<span class="badge">10</span></a>
					</li>
					<li>
						<a>咨询</a>
					</li>
					<li>
						<a>消息<span class="badge">10</span></a>
					</li>
				</ul>
			</div>
			<br />
			<div style="width: 150px;">
				<ul class="nav nav-pills nav-stacked">
					<li class="active">
						<a>新闻<span class="badge">10</span></a>
					</li>
					<li>
						<a>咨询</a>
					</li>
					<li>
						<a>消息<span class="badge">10</span></a>
					</li>
				</ul>
			</div>
		</div>

效果图：