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

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%
}