在前端開發中，使用icon是非常常見的操作，但是很多人并不知道CSS也可以用來實現icon，它不僅方便，還可以有效減少頁面請求次數和文件大小。

.icon {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 24px;
color: #333;
}

在上述代碼中，我們使用了Font Awesome作為字體圖標的來源。其實Font Awesome是一個很流行的前端字體庫，里面含有豐富的圖標樣式，這使得我們可以自由選擇符合自己需求的icon。當然，也可以選擇其他的字體庫或自定義字體圖標。

接下來，我們只需要在HTML中添加一個標簽，并給它加上對應的class就可以了。

<i class="icon fa fa-plus"></i>

在這里，我們給<i>標簽加上了兩個class，分別是icon和fa fa-plus。icon是我們剛剛定義好的class，fa fa-plus則是Font Awesome中的一個icon樣式。這里需要注意的是，使用Font Awesome時，需要先在項目中引入對應的CSS，該CSS文件可以在Font Awesome官網下載到。

總的來說，利用CSS實現icon有很多好處，除了方便、減少請求數量和文件大小之外，還可以提高頁面加載速度和用戶體驗。因此，在實際項目中建議多使用CSS來實現icon，讓頁面更加簡潔、優雅。