CSS 如何设置图标的颜色、大小和阴影

图标是任何网站或应用程序中不可或缺的一部分，因为它们为用户提供了一种快速简便的方式来理解和使用内容。然而，使用默认图标可能会使网站看起来普通和不吸引人。使用CSS，我们可以通过设置图标的颜色、大小和阴影来创建独特且视觉上吸引人的用户体验。

本文中，我们将学习如何使用CSS来设置图标的颜色、大小和阴影。我们将学习在CSS中使用不同的方法来设置图标。

在CSS中设置图标的不同方法

方法1：使用Font Awesome图标

设置图标的第一种方法是使用Font Awesome图标，它是一个流行的图标字体，提供了一系列可扩展的矢量图标，可以通过CSS进行自定义。Font Awesome图标可以使用不同的颜色、大小和阴影来与网站的设计相匹配。

使用Font Awesome图标非常简单。首先，我们需要在HTML文档的head部分引入Font Awesome样式表，添加以下代码：

<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

一旦您包含了Font Awesome样式表，我们可以使用任何Font Awesome图标来使用i标签和相关类在我们的HTML文档中。查看以下语法获取更多详细信息−

语法

以下语法定义了颜色和文本阴影给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和gradients来创建类似图标的形状。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图标。

svg {
   fill: green;
   width: 50px;
   height: 50px;
   filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>

示例

在下面的示例中，我们使用内联SVG代码来显示搜索图标，并使用CSS来设置颜色、大小和阴影。这里，使用fill属性将图标的颜色更改为红色，使用宽度和高度属性将图标的大小增加到50像素，并使用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>