資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 樣式化圖示的顏色、大小和陰影
圖示是任何網站或應用程式的重要組成部分，因為它們為使用者提供了一種快速簡便的方式來理解和互動內容。但是，使用預設圖示會使網站看起來通用且缺乏吸引力。使用 CSS，我們可以對圖示的顏色、大小和陰影進行樣式化，以創造獨特且視覺上吸引人的使用者體驗。
在本文中，我們將學習如何使用 CSS 對圖示的顏色、大小和陰影進行樣式化。我們將學習使用 CSS 對圖示進行樣式化的不同方法。
使用 CSS 樣式化圖示的不同方法
方法 1：使用 Font Awesome 圖示
樣式化圖示的第一種方法是使用 Font Awesome 圖示，它是一個流行的圖示字型，提供了一個可擴充套件向量圖示庫，可以使用 CSS 進行自定義。Font Awesome 圖示可以與不同的顏色、大小和陰影一起使用，以匹配網站的設計。
Font Awesome 圖示的使用非常簡單。首先，我們需要在 HTML 文件中包含 Font Awesome 樣式表，方法是在 head 部分新增以下程式碼：
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
包含 Font Awesome 樣式表後，我們現在可以使用 HTML 文件中的任何 Font Awesome 圖示，方法是使用帶有相關類的 i 標籤。請參閱以下語法以瞭解更多詳細資訊：
語法
以下語法將顏色和文字陰影定義為 i 元素。<i> 元素包含表示 HTML 圖示的類。
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
示例
在以下示例中，我們將 HTML5、CSS3 和 Github 圖示的顏色分別更改為紅色、藍色和黑色。除此之外，所有圖示的大小都設定為 10em，並且每個圖示的文字陰影分別為橙色、天藍色和灰色。
<html>
<head>
<title>Font Awesome icons styling using CSS</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
.icon-2 {
color: blue;
text-shadow: 2px 2px 2px skyblue;
}
.icon-3 {
color: black;
text-shadow: 2px 2px 2px gray;
}
.fa { font-size: 10em;}
</style>
</head>
<body>
<h2>Styling Font Awesome Icons using CSS</h2>
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
<div class="icon-2">
<i class="fa fa-css3" aria-hidden="true"></i>
</div>
<div class="icon-3">
<i class="fa fa-github" aria-hidden="true"></i>
</div>
</body>
</html>
方法 2：使用 CSS 圖示
CSS 圖示是將圖示新增到網站的另一種方法。CSS 圖示是使用 CSS 屬性（如 border-radius、box-shadow 和漸變）建立的，以建立類似圖示的形狀。CSS 圖示重量輕、易於自定義，並且可以縮放至任何大小。
語法
以下語法演示瞭如何建立 CSS 圖示，並且在此我們使用 before 或 after 偽元素並新增相關的 CSS 屬性。
.icon {
position: relative;
width: 50px;
height: 40px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
<div class="icon"></div>
示例
在以下示例中，我們添加了三個不同形狀、大小和顏色的不同圖示。CSS 圖示的顏色設定為淺藍色、淺紅色和淺綠色。我們還定義了圖示的大小以及具有不同顏色的陰影。
<html>
<head>
<title>CSS icons styling using CSS</title>
<style>
.container {
display: flex;
gap: 10px;
align-items: center
}
.icon-1 {
position: relative;
width: 50px;
height: 50px;
background-color: lightblue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
background-color: blue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2 {
position: relative;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
border-radius: 50px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3 {
position: relative;
width: 50px;
height: 40px;
background-color: lightred;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: red;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h2>CSS icons styling using CSS</h2>
<div class="container">
<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>
</div>
</body>
</html>
方法 3：使用 SVG 圖示
SVG（可縮放向量圖形）圖示是將圖示新增到網站的另一種流行方法。SVG 圖示是基於向量的，這意味著它們可以縮放至任何大小而不會損失質量。可以使用 CSS 對其進行自定義以更改其顏色、大小和陰影。
要將 SVG 圖示新增到您的網站，您首先需要找到要使用的 SVG 圖示。您可以在 Font Awesome 等網站上找到 SVG 圖示，或者使用 Adobe Illustrator 或 Inkscape 等向量編輯軟體建立自己的圖示。
語法
以下語法將填充、高度和寬度以及過濾器定義為 svg 元素。我們為 svg 圖示定義了不同的顏色、大小和投影。
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>
示例
在以下示例中，我們使用內聯 SVG 程式碼來顯示搜尋圖示，並使用 CSS 對其顏色、大小和陰影進行樣式化。這裡，fill 屬性用於將圖示的顏色更改為紅色，width 和 height 屬性用於將圖示的大小增加到 50px，filter 屬性用於向圖示新增投影。
<html>
<head>
<title>SVG Icon styling using CSS</title>
<style>
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
</style>
</head>
<body>
<h2>SVG Icon styling using CSS</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16.007 4c-3.308 0-6 2.692-6 6 0 .463.052.912.142 1.346l-7.264 7.264a1.5 1.5 0 0 0 2.122 2.122l7.264-7.264A5.933 5.933 0 0 0 16.007 16c3.308 0 6-2.692 6-6s-2.692-6-6-6zm0 10a3.999 3.999 0 0 1-3.998-3.98c0-2.209 1.79-3.998 3.998-3.998s3.998 1.79 3.998 3.998c0 2.209-1.79 3.98-3.998 3.98z"/>
</svg>
</body>
</html>
結論
使用 CSS 對圖示的顏色、大小和陰影進行樣式化是一種非常簡單的方法，可以為我們的網站或應用程式提供自定義外觀。我們可以使用 Font Awesome、SVG 圖示或 CSS 圖示，我們可以建立獨特且視覺上吸引人的圖示，以匹配我們網站的設計。
3K+ 瀏覽量
