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

本文主要是介绍响应式前端框架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>

效果图：