現(xiàn)今網(wǎng)站的設(shè)計(jì)越來越簡(jiǎn)潔，同時(shí)圖標(biāo)在頁面中的使用也越來越普遍。像房子這樣的關(guān)鍵詞，在不少地產(chǎn)、裝修類網(wǎng)站中都是很重要的主題，在頁面中加入一些適合的房子類圖標(biāo)可以使網(wǎng)站更加生動(dòng)、直觀。

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

可是手頭沒有了解數(shù)碼設(shè)計(jì)軟件的設(shè)計(jì)師可能無法馬上自己手繪出合適的圖標(biāo)，雖然在網(wǎng)上搜索別人手繪的圖標(biāo)進(jìn)行采用是可以的，但是使用別人的圖標(biāo)時(shí)，存在一定的知識(shí)產(chǎn)權(quán)問題。

這時(shí)候，使用CSS圖標(biāo)庫就稍微容易些了，CSS圖標(biāo)庫則是收集了各種免費(fèi)圖標(biāo)以供開發(fā)者使用。

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

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

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

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

結(jié)合我們需要的實(shí)際應(yīng)用，使用現(xiàn)成的CSS圖標(biāo)庫，可以避免版權(quán)的問題，同時(shí)也為我們省去自己手繪各種大小不一、角度不合適的圖標(biāo)的時(shí)間。