简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  文章  >  web前端  >  如何使用 CSS 设置图标颜色、大小和阴影的样式

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

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

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

图标是任何网站或应用程序的重要组成部分，因为它们为我们提供了一种快速、简单的方式让用户理解内容并与之交互。但是，使用默认图标会使网站看起来很普通且没有吸引力。使用 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 图标，也可以使用 Adob​​e 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 图标，通过它们我们可以创建与我们网站的设计相匹配的独特且具有视觉吸引力的图标。

以上是如何使用 CSS 设置图标颜色、大小和阴影的样式的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 css css3 html Filter 样式表 伪元素 github
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除
上一篇：使用 CSS 返回所选元素的属性值下一篇：如何使用CSS自动调整字体大小？

相关文章

查看更多