資料結構
網路
關係資料庫管理系統 (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/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 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/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 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 次瀏覽
