Bootstrap图标引用方法

从这篇文章开始,我们来讲解一下关于Bootstrap一些相关组件的使用,首先让我们来看看,Bootstrap图标的种类以及它的使用方法。

Bootstrap图标集,Glyphicons图标

Bootstrap的图标组件并非自己制作的,而是由国外一个图标团队提供的,虽然它们自身是收费图标,不过他们授权Bootstrap可以免费使用它们的200个图标。
Glyphicons组件使用起来相当方便快捷,你可以参考Bootstrap图标引用样式,使用方法也相当简单,类似以下代码即可:<span class="glyphicon glyphicon-search"></span>

Bootstrap与其他元素结合使用

这种结合的情况有很多,例如你想要在按钮中添加喜欢的图标,那么以下几行代码即可实现:<button type="button" class="btn btn-default btn-lg">     <span class="glyphicon glyphicon-star"></span> 收藏 </button>该代码能够生成一个带有星星图标的收藏按钮。

Bootstrap图标的性质

说到这系列图标的性质,我们不得不提到目前在网站建设领域愈发流行的字体图标了。
由于响应式布局扁平化设计的风靡,字体图标代替原有的图形化图标,慢慢占据了网站建设领域的更多位置。
字体图标的好处在于,可以通过CSS属性来对图标进行自定义(颜色、大小、阴影、渐变等),而且由于是矢量,所以不管在什么设备下都可以无锯齿展现,可谓是相当给力。

其他字体图表集

如果你认为Glyphicons图标集合太少,无法满足你的网站开发需求,那么你可以尝试采用当下最为流行的图标开源组件FontAwesome
这个由国外达人分享的开源免费字体图标组件获得了广泛使用和认可,多达近400种的免费图标更是涵盖了绝大部分的图标样式。
如果你有兴趣,可以看看我们的FontAwesome介绍,能够很轻松地学会如何使用它。

写在文章最后

不得不说,开源的世界为整个Web开发界带来了更多新鲜血液与力量,它们能够让你的开发进度事半功倍,让编码从此成为一种不再重复造車的乐趣。

图标参考