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

王林转载: 2023-09-15 21:53:02 205浏览

图标是任何网站或应用程序的重要组成部分，因为它们为我们提供了一种快速、简单的方式让用户理解内容并与之交互。但是，使用默认图标会使网站看起来很普通且没有吸引力。使用 CSS，我们可以设置图标颜色、大小和阴影的样式，以创建独特且具有视觉吸引力的用户体验。

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

CSS 中图标样式的不同方法

方法1：使用Font Awesome图标

设计图标样式的第一种方法是使用 font Awesome Icons，这是一种流行的图标字体，它提供了可使用 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 样式表后，我们现在可以使用带有相关类的 i 标签在 HTML 文档中使用任何 Font Awesome 图标。有关更多详细信息，请参阅以下语法 -

语法

以下语法定义 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 属性（如边框半径、框阴影和渐变）创建的，以创建类似于图标的形状。 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>