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

傷城~ 2021-09-14 14:14 289阅读 0赞

字体图标是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>

效果图：

![SouthEast][]

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

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

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

效果图：

![SouthEast 1][]

[SouthEast]: /images/20210813/aa6c2ad6f9bc462b82d768a84fe643da.png
[SouthEast 1]: /images/20210813/b7c5d3bdafd24bbebd327584589ba69b.png