Question

我想在导航栏中使用图标进行网络搜索。如何使用CSS调整图像图标大小？如何根据标题更改图标颜色？

以下是HTML代码：

<ul>
    <li><a class="icon icon-home" href="#">Home</a></li>
    <li><a class="icon icon-favorit" href="#">Favorit</a></li>
    <li><a class="icon icon-news" href="#">News</a></li>
    <li><a class="icon icon-events" href="#">Events</a></li>
    <li><a class="icon icon-about" href="#">About us</a></li>
    <li><a class="icon icon-contact" href="#">Contact</a></li>
</ul>

这是我的CSS规则之一，其他规则是相同的。

.icon-home {
    content:url(../images/food.png);
}

Answer 1

调整您可以使用的内容的大小：

.icon-home{
content: "";
background: url(../images/food.png) no-repeat 0 0;;
height:10px;/*whatever you want*/
width:10px;/*whatever you want*/
background-size:100%
}

Answer 2

要更改图标颜色，您可以使用css filter属性。它可以访问一些效果，如色移，亮度和模糊。

查看CSS Filter Effects演示页以查看功能以及css示例。

您可以按如下方式更改css，将图标颜色变为灰度

.icon-home
{
    filter: grayscale(100%);
    -moz-filter: grayscale(100%); //firefox
    -webkit-filter: grayscale(100%); //chrome
}

您还可以应用多种功能

.icon-home
{
  -webkit-filter: contrast(3) grayscale(0.2) sepia(0.6);
}

如何使用CSS设置图像图标和可编辑颜色

2 个答案: