當今網頁設計中，圖標設計是不可或缺的一個環節。對于鄉村和農村主題網站來說，使用鄉下圖標是非常重要的。那么如何用CSS來實現呢？

/* 定義圖標樣式 */
.rural-icon {
background-image: url(./rural-icon.png);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
}
/* 定義不同圖標樣式 */
.rural-icon.house {
background-position: 0 0; /* 住宅 */
}
.rural-icon.farm {
background-position: -24px 0; /* 農場 */
}
.rural-icon.tree {
background-position: -48px 0; /* 樹木 */
}
.rural-icon.pumpkin {
background-position: -72px 0; /* 南瓜 */
}
/* HTML中使用圖標 */
<p><span class="rural-icon house"></span>住宅</p>
<p><span class="rural-icon farm"></span>農場</p>
<p><span class="rural-icon tree"></span>樹木</p>
<p><span class="rural-icon pumpkin"></span>南瓜</p>

通過上述代碼，我們定義了一個.rural-icon的樣式，用于設置鄉下圖標的顯示效果，包括設置背景圖片、不重復平鋪、用內聯塊級元素并垂直居中、寬高分別為24像素。

接著，我們又定義了四種不同的圖標樣式，分別對應不同的圖標，設置不同的background-position，用于調整在背景圖中的位置與尺寸。

最后，在HTML中使用時，我們只需在需要顯示圖標的文字前面加上上述樣式即可。

以顯示住宅圖標為例，我們只需這樣操作：

<p><span class="rural-icon house"></span>住宅</p>

至此，我們就成功實現了用CSS來顯示鄉下圖標了。