怎么使用 Bootstrap 的组件字体图标呢？

出于性能的考虑，所有图标都需要一个积累和对应每个图标的类，那要把下面在哪方面任何地方都可以正常使用的，注意的是为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

1、不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标应用到这个 标签上。

2、只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

3、改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于../fonts/目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下列出的任何一种方式来更新 CSS 文件:

①在Less 源码文件中修改 @icon-font-path 和/或@icon-font-name 变量。

②利用 Less 编译器提供的相对 URL 地址选项。

③修改预编译 CSS 文件中的 url() 地址。

根据你自身的情况选择一种方式即可。

4、图标的可访问性

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时)，我们为这些图标设置了 aria-hidden＝“true” 属性。

如果你使用图标是为了表达某些含义（不仅仅是为了装饰），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果（就是我们需要一个类，但是呢根据显示我们就添加一个类）。

如果你所创建的组件不包含任何文本内容（例如， 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

在这里我们继续创建一个文件，

写入 icons 在添加一个图标，在使用 cdn 引入方式在起步里边引入，然后再写

使用 contaliner 它有一个不好的就是它没有一个提示，在写入<spen class=””

起步里边找 cdn

再在组件当中选择一个图标

把类名复制即可，注意 glyphicon glyphicon 之间的空格，在增加一个可访问的属性 iar-hidden=”true”

就这样即可，然后执行看效果，刷新、执行，我们可以看到一个音乐的小图标，代表我们成功完成。