开发者学堂课程【前端开发框架Bootstrap使用教程： 19_Bootstrap组件1_字体图标】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/360/detail/4238

19_Bootstrap组件1_字体图标

内容介绍：

一、所有可用的图标

二、如何使用

三、实例

一、所有可使用的图标

包括250多个来自 Glyphicon Halflings 的字体图标。

Glyphicon Halflings 一般是收费的，但是他们的作者允许 Bootrap 免费学习。

这些图标可谓是应有尽有，你们需要什么即添加上这个类即可对应的这个类。

二、如何使用

出于性能的考虑，所有图标都需要一个积累和对应每个图标的类，那要把下面在哪方面任何地方都可以正常使用的，注意的是为了设置正确的内补（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 它有一个不好的就是它没有一个提示，在写入

起步里边找 cdn

再在组件当中选择一个图标，比如说来个音乐的这样的图标

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

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

三、实例

 可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

写一个半标签  

我们增强一个可属性

刷新，我们可以看到小云图标，根据不同需求增加图标。