bootstrap 提供了字体图标库。如果一个图标,鼠标移上去,图标的颜色深浅改变,说明是个字体图标。
字体图标的用法:
1、给a标签增加图标的class属性即可
2、修改a标签的::before属性,如果需要调节间距,可以设置padding值
.nav a::before{
vertical-align: middle;
padding-right: 5px;
}
vertical-align:middle表示把此元素,放在父元素的中部
<ul>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
<li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
<li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
</ul>