現今網站的設計越來越簡潔，同時圖標在頁面中的使用也越來越普遍。像房子這樣的關鍵詞，在不少地產、裝修類網站中都是很重要的主題，在頁面中加入一些適合的房子類圖標可以使網站更加生動、直觀。

.house-icon {
width: 20px;
height: 20px;
display: inline-block;
background-image: url('house_icon_library.png');
}

可是手頭沒有了解數碼設計軟件的設計師可能無法馬上自己手繪出合適的圖標，雖然在網上搜索別人手繪的圖標進行采用是可以的，但是使用別人的圖標時，存在一定的知識產權問題。

這時候，使用CSS圖標庫就稍微容易些了，CSS圖標庫則是收集了各種免費圖標以供開發者使用。

/* 下面為房子圖標的CSS代碼，這里使用的是Font Awesome庫中的房子圖標 */
.house-icon {
font-family: "Font Awesome 5 Free";
font-weight:400;
content: "\f015";
}

通過引入CSS圖標庫，我們就可以輕松地插入各種不同的圖標。現今的CSS圖標庫有很多，常見的有Font Awesome、Ionicons、Material Icons、Glyphicons等。引入這些庫時，首先需要在HTML文件的head中引入CSS文件鏈接，例如：

接著，我們需要知道每個具體圖標的類名，類名不同于常見的CSS類名，而是由庫文件中所指定的，這些類名的作用就是通過CSS來顯示圖標。以Font Awesome庫為例，其圖標的類名以"fa"開頭，如fa-home、fa-building等等。以安裝了該庫為前提，要在頁面中插入一個fa-home圖標，就可以通過如下代碼實現。

為了避免圖標文件太多而造成加載變慢，可以僅僅選擇需要用到的圖標的CSS進行下載。

結合我們需要的實際應用，使用現成的CSS圖標庫，可以避免版權的問題，同時也為我們省去自己手繪各種大小不一、角度不合適的圖標的時間。