如何将自定义颜色应用于嵌入在 Bootstrap 样式链接中的 Glyphicon 图标?
bootstrapweb developmentfront end technology
我们可以在 Bootstrap 项目中使用 Glyphicon，只需在 HTML 中为"span"标签添加 Glyphicon 特定的类即可。Glyphicon 本质上是字体图标，可以在 Web 应用程序的任何位置使用，例如按钮、表单、输入框、文本等。它们由 Bootstrap 提供，通常由符号、字体或图形图标组成。
语法
<span class="glyphicon glyphicon-[icon_name]"></span>
此处，"glyphicon"类是一个 Bootstrap 类，允许我们在 Web 应用程序中使用 glyphicon 图标，"icon_name"指的是我们想要嵌入并在应用程序中使用的特定 glyphicon 图标。
方法 1:使用 CSS 类选择器
在此方法中，我们将使用 CSS 中的类选择器将自定义颜色应用于 glyphicon。类选择器本质上是一个点 (.) 选择器，用于选择一个 HTML 元素(在本例中为 glyphicon)并操作该元素或仅对其应用一些 CSS 样式。
示例
在此示例中，我们将选择一个 glyphicon 并使用 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>
结论
在本文中，我们了解了什么是 glyphicon，并使用两种方法将自定义颜色应用于嵌入链接并使用 Bootstrap 设置样式的 glyphicon。第一种方法，我们使用 CSS 类选择器将颜色应用于 glyphicon;第二种方法，我们使用 CSS id 选择器将颜色应用于 glyphicon。
