CSS 如何将Bootstrap 3的图标修改为白色

在本文中，我们将介绍如何将Bootstrap 3中的图标修改为白色。

首先，我们要了解Bootstrap 3中使用的图标是通过glyphicons字体来实现的。图标是使用特定的CSS类来添加到HTML元素上的。默认情况下，这些图标是黑色的，但是我们可以通过修改CSS样式来改变它们的颜色。

要将Bootstrap 3的glyphicons图标修改为白色，我们可以通过以下两种方法来实现：

阅读更多：CSS 教程

方法一：使用内联样式

一种修改Bootstrap 3图标颜色的简单方法是通过为HTML元素使用内联样式来设置图标的颜色为白色。

下面是一个例子，展示了如何将一个Bootstrap 3图标修改为白色：

<span class="glyphicon glyphicon-search" style="color: white;"></span>

在上面的例子中，我们通过为<span>元素添加内联样式style="color: white;"来将图标的颜色设置为白色。你可以根据需要修改HTML元素并设置不同的颜色。

除了使用内联样式，我们还可以通过自定义CSS样式来修改Bootstrap 3图标的颜色。这种方法更加灵活，可以在整个网站上统一修改图标的颜色。

首先，在您的网页上添加一个新的CSS样式表。然后，为这个样式表添加下面的代码：

.glyphicon-white {
  color: white;
}

在上面的代码中，我们定义了一个名为.glyphicon-white的CSS类，并将其颜色设置为白色。现在，我们就可以将这个CSS类应用到任何Bootstrap 3图标上了。

下面是一个例子，展示了如何使用自定义CSS样式将Bootstrap 3图标修改为白色：

<span class="glyphicon glyphicon-search glyphicon-white"></span>

在上面的例子中，我们在<span>元素的class属性中添加了.glyphicon-white类，从而使图标的颜色变为白色。你可以根据需要修改HTML元素并为它们添加不同的CSS类。

通过使用内联样式或自定义CSS样式，我们可以很容易地将Bootstrap 3的glyphicons图标修改为白色。这样，我们就可以根据自己的需要来改变图标的颜色，使其更好地适应我们的网站设计。

希望本文对你有所帮助！