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

百变鹏仔 3个月前 (09-19) #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 图标，也可以使用 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 图标，通过它们我们可以创建与我们网站的设计相匹配的独特且具有视觉吸引力的图标。

文章推荐

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

CSS 中图标样式的不同方法

方法1：使用Font Awesome图标

语法

示例

方法2：使用CSS图标

语法

示例

方法 3：使用 SVG 图标

语法

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写