在网页设计中，使用图标可以让网页更加美观和易于阅读。而其中，使用CSS图标库则可以让网站设计更加简单和方便。下面介绍几个常用的CSS图标库和如何进行置顶。

常用的CSS图标库

1. Font Awesome：这是一个很有名的图标库，包括了免费和收费两个版本。其中免费版本可以满足绝大多数需求。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-home"></i>

2. Bootstrap Icons：这是Bootstrap自带的图标库，包含了一些较基础的图标。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
<i class="bi bi-geo"></i>

3. Material Icons：这是Google提供的图标库，包含了一些现代化的图标。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">home</i>

如何进行CSS图标库置顶

想要进行CSS图标库置顶，我们需要使用CSS的相对定位和z-index属性。

.icon {
position: relative;
z-index: 1;
}
.icon:hover {
z-index: 2;
}

在该段代码中，我们使用了.icon类。当鼠标悬停在图标上时，我们可以使用:hover伪类来改变z-index的值，从而将图标固定在最前方。当鼠标离开时，又将z-index值更改为原本的值，即返回到最初状态。

通过上述介绍，我们可以更加方便地使用CSS图标库，并且了解如何进行置顶。