深入学习Bootstrap中的图标

前言

Bootstrap是一个开源的前端开发框架，提供了丰富的CSS和JavaScript组件，使得前端开发变得更加高效和快速，尤其是在移动设备开发中，有着不可替代的优势。

图标是Bootstrap组件库中非常重要的一部分，通过常用的图标，可以让用户在不同的平台和设备上快速识别和使用，提高用户体验。

内置图标

Bootstrap内置了两种图标字体，分别是Glyphicons和FontAwesome，均可以通过className来使用。

其中Glyphicon图标字体只有在Bootstrap 3中提供，由于其有版权争议，Bootstrap 4中取消了该字体，推荐使用FontAwesome。

FontAwesome图标

FontAwesome是一种免费的开源图标字体，拥有超过1300个图标，可以自由定制和使用。

使用FontAwesome，需要在head标签中添加引用链接，如下：

使用图标时，可以在元素中添加fa类和对应的图标类名，如下：

自定义图标

除了使用内置的图标字体外，Bootstrap还提供了自定义图标的方式，可以更加灵活的控制图标的样式和效果。

首先需要引入icomoon图标库，该库提供了一些免费的图标和自定义图标的制作工具。

其中icon类名是icomoon字体库中的自定义类名。