Bootstrap—200多种字体图形，你想要的都在这里

还在辛辛苦苦切精灵图吗，还在使用position小心翼翼将精灵图上的小小图标一个一个显示吗，Bootstrap为我们提供了200多种常用的字体图形，这大大减少了以上说的这些工作。

bootstrap 3.x以上支持字体图形，glyphicons为我们提供了各式各样常用图标。参照http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm，你将看到如下各式各样的图标：

接下来讲一下如何使用。

1.首先当然是引入脚本文件。

rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

并且保证项目能找到glyphicion相关文件，这些文件在/bootstrap-3.3.7/fonts/目录下。

2.使用。

你可以使用在button中，也可以使用在span中，所谓字体图形，他允许我们像字体一样使用他，要给他加上样式，使用一个标签包裹它，这里我们直接使用span标签。

    
    
    


    

        apple
        music
        asterisk
    

效果如下：

代码中可以看到，给一个span标签加入class="glyphicon glyphicon-apple"样式属性，即可得到字体图标苹果。

其中.glyphyicon是声明图标位置，字体和行高等，glyphicon-apple是指定使用的具体图标样式。

3.改变图标颜色和大小。

如字体一样，我们也可以改变图标的颜色和大小，还可以给图标加上阴影。

 

        apple-default
        apple-20px
        music-20px-red
        asterisk-20px-red-shadow
    

效果如下：

代码中可以看到，改变字体图标的颜色，尺寸应用阴影，跟操作字体是一样的。

使用font-size该表大小，color改变颜色，text-shadow加上阴影。

字体图标可以使用在其他地方，比如导航栏图标，按钮图标等，具体可根据项目需求使用。

文章参照来自：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html