css如何更改小图标颜色 |css插入图片全屏

CSS如何更改小图标颜色 使用小图标可以在网页设计中增加一些装饰性元素。但是，有时候为了更好的视觉效果需要改变小图标的颜色。使用 CSS 可以很方便地实现这一点。下面是一个针对 Font Awesome 字体图标的例子。 第一步：引入 Font Awesome 字体 在 HTML 文件的标签中引入 Font Awesome 字体：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"/>

第二步：添加小图标标签 在需要使用小图标的地方，添加 Font Awesome 字体的 HTML 标签。例如，添加一个“搜索”图标：

<i class="fas fa-search"></i>

第三步：更改颜色 在 CSS 文件中使用 color 属性，更改小图标的颜色：

p {
color: red;
}
.fa-search {
color: blue;
}

这个例子中，<p>标签的文本颜色被更改为红色，而“搜索”图标的颜色被更改为蓝色。 需要注意的是，使用 font-size 属性可以调整小图标的大小，使用 line-height 属性可以将小图标垂直居中。例如：

.fa-search {
color: blue;
font-size: 24px;
line-height: 24px;
}

这个例子中，“搜索”图标的大小被调整为 24 像素，垂直居中。 总结 使用 CSS 更改小图标的颜色可以为网页设计添加一些视觉效果。使用 Font Awesome 字体可以实现这种效果，只需要在 HTML 文档中引入字体文件，然后在 CSS 文件中使用 color 属性调整颜色。当然，除了颜色之外，也可以使用 font-size 和 line-height 属性调整小图标的大小和位置。