如何将自定义的颜色应用于嵌入Bootstrap风格的链接中的glyphicon图标

我们可以在bootstrap项目中使用glyphicons，只需给HTML中的 “span “标签加上一个特定的glyphicon类。Glyphicons基本上是字体图标，可以在你的网络应用中的任何地方使用，例如，在按钮、表单、输入、文本等。它们由Bootstrap提供，通常由符号、字体或图形图标组成。

语法

<span class=”glyphicon glyphicon-[icon_name]”></span>

这里，”glyphicon “类是一个Bootstrap类，它允许我们在网络应用中使用glyphicon图标，而 “icon_name “指的是我们想要嵌入并在应用中使用的特定glyphicon图标。

方法1：使用CSS类选择器

在这种方法中，我们将通过使用CSS中的类选择器来为一个图标应用自定义颜色。类选择器基本上是一个点（.）选择器，用来选择一个HTML元素（本例中是一个字形图标）并对该元素进行操作，或者只是对其应用一些CSS样式。

例子

在这个例子中，我们将选择一个图标，并通过使用CSS类选择器给它加上 “红色 “的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <title>How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?</title>
   <style>
      .custom-color {
         color: red;
      }
   </style>
</head>
<body>
   <h1>Glyphicon styling!</h1>
   <a href="#">
      <span class="glyphicon glyphicon-search custom-color"> Red Glyhicon</span>
   </a>
</body>
</html>

方法2：使用CSS的id选择器

在这种方法中，我们将通过使用CSS中的id选择器来为一个图标应用自定义颜色。id选择器基本上是一个哈希（#）选择器，用来选择一个HTML元素（本例中是一个字形图标）并对该元素进行操作，或者只是对其应用一些CSS样式。

例子

在这个例子中，我们将选择一个字形图标，并通过使用CSS id选择器给它加上 “红色 “的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <title>How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?</title>
   <style>
      #custom-color {
         color: red;
      }
   </style>
</head>
<body>
   <h1>Glyphicon styling!</h1>
   <a href="#">
      <span class="glyphicon glyphicon-search" id="custom-color"> Red Glyhicon</span>
   </a>
</body>
</html>