图标是任何网站或应用程序的重要组成部分，因为它们为我们提供了一种快速、简单的方式让用户理解内容并与之交互。但是，使用默认图标会使网站看起来很普通且没有吸引力。使用 CSS，我们可以设置图标颜色、大小和阴影的样式，以创建独特且具有视觉吸引力的用户体验。
在本文中，我们将学习如何使用 CSS 设置图标颜色、大小和阴影的样式。我们将学习在 CSS 中设置图标样式的不同方法。
CSS 中图标样式的不同方法
方法1：使用Font Awesome图标
设计图标样式的第一种方法是使用 font Awesome Icons，这是一种流行的图标字体，它提供了可使用 CSS 自定义的可扩展矢量图标库。 Font Awesome 图标可以使用不同的颜色、大小和阴影，以与网站的设计相匹配。
Font Awesome 图标的使用非常简单。首先，我们需要在 HTML 文档中包含 Font Awesome 样式表，方法是在 head 部分添加以下代码 –
立即学习“前端免费学习笔记（深入）”；
包含 Font Awesome 样式表后，我们现在可以使用带有相关类的 i 标签在 HTML 文档中使用任何 Font Awesome 图标。有关更多详细信息，请参阅以下语法 –
语法
以下语法定义 i 元素的颜色和文本阴影。 元素由表示 HTML 图标的类组成。
.icon-1 { color: red; text-shadow: 2px 2px 2px orange;}
示例
在下面的示例中，我们将 HTML5、CSS3 和 Github 图标的颜色分别更改为红色、蓝色和黑色。与此同时，所有图标的大小设置为10em，每个图标中的文本阴影分别为橙色、天蓝色和灰色。
Font Awesome icons styling using CSS .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;}Styling Font Awesome Icons using CSS
方法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);}
示例
在下面的示例中，我们添加了三个不同形状、大小和颜色的不同图标。 CSS 图标的颜色设置为浅蓝色、浅红色和浅绿色。我们还定义了图标的大小和不同颜色的框阴影。
CSS icons styling using CSS .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); }CSS icons styling using CSS
方法 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 代码来显示搜索图标，并使用 CSS 来设置其颜色、大小和阴影的样式。这里，fill属性用于将图标的颜色更改为红色，width和height属性用于将图标的大小增加到50px，filter属性用于为图标添加阴影。
SVG Icon styling using CSS svg { fill: green; width: 50px; height: 50px; filter: drop-shadow(2px 2px 2px orange); }SVG Icon styling using CSS
结论
使用 CSS 设计图标颜色、大小和阴影是一种非常简单的方法，可以为我们的网站或应用程序提供自定义外观。我们可以使用 Font Awesome、SVG 图标或 CSS 图标，通过它们我们可以创建与我们网站的设计相匹配的独特且具有视觉吸引力的图标。
以上就是如何使用 CSS 设置图标颜色、大小和阴影的样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626168.html
微信扫一扫 
支付宝扫一扫 
