数据结构
网络
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+ 浏览量
