CSS中的Icon指的是网页中所用的图标，它可以作为页面内容的辅助展示，使页面更加美观，同时也可以传达出更多信息。这篇文章将介绍如何在CSS中使用Icon。

首先，我们需要为我们的网页选择一组合适的Icon，可以选择字体图标或者SVG图标。字体图标使用字体文件来呈现，使用简单方便，但是需要引入字体文件。SVG图标是矢量图形，可以直接使用，不需要额外引用文件。

//使用字体图标
@font-face {
font-family: 'iconfont';
src: url('./icon/iconfont.eot');
src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'),
url('./icon/iconfont.woff2') format('woff2'),
url('./icon/iconfont.woff') format('woff'),
url('./icon/iconfont.ttf') format('truetype'),
url('./icon/iconfont.svg#iconfont') format('svg');
}
.icon {
font-family: 'iconfont';
font-size: 20px;
color: #aaa;
}
//使用SVG图标
.icon {
width: 20px;
height: 20px;
background: url('./icon/icon.svg') no-repeat;
}

使用字体图标时，先引入字体文件，然后在CSS中设置字体名称，就可以在页面中使用Icon了。每个Icon对应一个Unicode编码，我们只需要在HTML中添加对应编码的字符串，就可以显示出对应的图标了。



使用SVG图标时，我们需要设置Icon的宽度和高度，并将Icon文件作为背景。可以使用Sprite技术，将多个Icon组合成一个文件，减少HTTP请求。

.icon {
width: 20px;
height: 20px;
background: url('./icon/sprite.svg') no-repeat;
background-position: -20px -20px;
}

使用Icon时，还需要注意一些细节问题。首先是Icon的大小和颜色应该和页面风格保持一致，在使用时需要注意。其次是如果使用的Icon样式库，需要注意样式名称和Icon名称的对应关系。

总的来说，CSS中的Icon可以给页面增加装饰性，同时也可以传达更多信息，是网页中不可缺少的元素。