6.6.2 图标

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.1k 阅读时长 ≈ 3 分钟

6.6.2 图标

Bootstrap通过Glyphicon Halflings字体提供了250多个字体小图标,这些小图标的用法非常简单,通常会通过一个空的<span>元素并为该元素设置两个CSS样式来使用这些图标。
为了正确地使用这些图标,需要两个CSS样式配合。

  • .glyphicon:该样式设置它是一个小图标。
  • .glyphicon-xxx:该样式设置具体是哪个小图标。后面的xxx需要根据不同图标而改变,具体可参考这个网站

程序示例

下面代码示范了如何单独地使用小图标,以及如何在段落文字、按钮中使用这些图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 图标相关样式 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </div>
            <div class="col-sm-12">
                文字中
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 嵌套使用的
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 图标
            </div>
            <div class="col-sm-12">
                <button class="btn btn-default btn-lg" type="button">
                    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                </button>
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                </button>
                <button class="btn btn-default btn-sm" type="button">
                    <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                </button>
                <button class="btn btn-default btn-xs" type="button">
                    <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

从以上代码可以看出,不管是单独使用小图标,还是在文本中和按钮中使用小图标,代码中总是定义一个空的<span>元素,并为之设置两个CSS样式。
在该代码中,还使用了aria-hiddn属性,该属性主要对有视觉缺陷、失聪和行动不便的残疾人设置的。尤其像盲人,需要借助于屏幕阅读器(屏幕阅读器可以朗读发声或输出盲文)才能浏览网页。而aria-*等属性都是针对这部分人设计的,如aria-hiddn表明该元素对残疾人隐藏;aria-label表示对残疾人有效的标签等。
为了能正确地设置padding,请在图标和文本之间添加一个空格。
需要说明的是,Bootstrap的小图标是依赖bootstrapfonts目录下那些字体文件的,因此开发者不要删除该文件夹,尽量不要改变fonts文件夹与bootstrap.min.css之间的相对位置(fonts文件夹默认需要位于bootstrap.min.css文件的上一级目录下fonts文件夹内)。如果改变了fonts文件夹的位置,开发者只有重新修改Less源代码或bootstrap.min.css文件,这比较麻烦。

上面的页面需要进行跨源请求,所以要放到Web服务器上。