数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在使用 Bootstrap 样式的链接中应用自定义颜色到 Glyphicon 图标？
我们只需在 HTML 中的 “span” 标签中添加特定于 glyphicon 的类，即可在 Bootstrap 项目中使用 glyphicon。Glyphicon 本质上是字体图标，可以在 web 应用的任何地方使用，例如按钮、表单、输入框、文本等。它们由 Bootstrap 提供，通常包含符号、字体或图形图标。
语法
<span class=”glyphicon glyphicon-[icon_name]”></span>
这里，“glyphicon” 类是 Bootstrap 类，允许我们在 web 应用中使用 glyphicon 图标，“icon_name” 指的是我们想要嵌入和使用的特定 glyphicon 图标。
方法一：使用 CSS 类选择器
在这种方法中，我们将使用 CSS 中的类选择器来为 glyphicon 应用自定义颜色。类选择器基本上是一个点 (.) 选择器，用于选择 HTML 元素（在本例中为 glyphicon）并操作该元素或仅对其应用一些 CSS 样式。
示例
在这个例子中，我们将使用 CSS 类选择器选择一个 glyphicon 并将其颜色设置为“红色”。
<!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.cn/npm/[email protected]/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>
方法二：使用 CSS ID 选择器
在这种方法中，我们将使用 CSS 中的 ID 选择器来为 glyphicon 应用自定义颜色。ID 选择器基本上是一个井号 (#) 选择器，用于选择 HTML 元素（在本例中为 glyphicon）并操作该元素或仅对其应用一些 CSS 样式。
示例
在这个例子中，我们将使用 CSS ID 选择器选择一个 glyphicon 并将其颜色设置为“红色”。
<!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.cn/npm/[email protected]/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 应用颜色。
409 次浏览
