css3中的小图标

CSS3给网页设计者提供了更多的选择，比如使用小图标来美化网页。 在这篇文章中，我们会了解如何使用CSS3来添加小图标。

/* 在这里添加小图标的样式 */
.icon {
/* 确定图标的大小 */
width: 16px;
height: 16px;
/* 确定图标的位置 */
background-position: center;
background-repeat: no-repeat;
}
/* 添加更多小图标 */
.icon-home {
background-image: url("home.png");
}
.icon-menu {
background-image: url("menu.png");
}
/* 添加图标到html中 */
<i class="icon icon-home"></i>

在上面的代码框内，我们首先定义了名为“icon”的CSS样式代码。它设置了图标的大小和位置。接下来，我们为图标添加类名，比如“icon-home”和“icon-menu”，并在CSS中为这些类添加背景图片，以使其成为图标。

最后，我们将图标添加到HTML中。使用<i></i>标签，以前缀“icon icon-home”的形式创建一个新的元素，从而将图标添加到任何你想要的地方。

总之，使用CSS3小图标可以使网页看起来更加美观和专业，因此在设计网站时不妨试试这个简单的技巧。

查看更多关于css3中的小图标的详细内容...