1、在HTML中定義多個(gè)圖標(biāo)，每個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)類名。

<i class="icon-home"></i>
<i class="icon-user"></i>
<i class="icon-search"></i>

2、在CSS中為每個(gè)圖標(biāo)類定義對(duì)應(yīng)的樣式。

.icon-home {
  background-image: url('home-icon.png');
}
.icon-user {
  background-image: url('user-icon.png');
}
.icon-search {
  background-image: url('search-icon.png');
}

3、將圖標(biāo)樣式應(yīng)用于HTML元素，由于使用了類名，因此可以通過(guò)CSS類選擇器來(lái)應(yīng)用樣式。

i.icon-home {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: contain;
}

通過(guò)以上步驟，可以在HTML頁(yè)面中設(shè)置多個(gè)圖標(biāo)，每個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)類名，并在CSS中定義對(duì)應(yīng)的樣式，在HTML元素中應(yīng)用這些類名，即可顯示相應(yīng)的圖標(biāo)。