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

最新推荐文章于 2024-09-01 08:31:31 发布

Tiramisu_C

最新推荐文章于 2024-09-01 08:31:31 发布

阅读量9.8k

点赞数 2

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 字体图标

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53616516

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Bootstrap学习之路

17 篇文章 17 订阅

订阅专栏

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

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

接下来讲一下如何使用。

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

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

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

2.使用。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap字体图标</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container" style="margin-top: 20px">
        <span class="glyphicon glyphicon-apple">apple</span>
        <span class="glyphicon glyphicon-music">music</span>
        <span class="glyphicon glyphicon-asterisk">asterisk</span>
    </div>
</body>
</html>

效果如下：

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

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

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

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

 <div class="container" style="margin-top: 20px">
        <span class="glyphicon glyphicon-apple" >apple-default</span>
        <span class="glyphicon glyphicon-apple" style="font-size: 20px">apple-20px</span>
        <span class="glyphicon glyphicon-music" style="font-size: 20px;color: red">music-20px-red</span>
        <span class="glyphicon glyphicon-asterisk"  style="font-size: 20px;color: red;text-shadow: #122b40 2px 2px 2px">asterisk-20px-red-shadow</span>
    </div>

效果如下：