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

如何将自定义的颜色应用于嵌入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>

总结

在这篇文章中,我们了解了什么是glyphicon,并使用两种方法为嵌入在链接中并使用Bootstrap样式的glyphicon应用了自定义颜色。在第一种方法中,我们使用CSS类选择器为石膏像应用颜色,在第二种方法中,我们使用CSS id选择器为石膏像应用颜色。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程