CSS字體手機小圖標可以為我們的網頁或移動應用程序增添很多趣味和美感，同時也可以使用戶界面更易于理解。本文將介紹如何使用CSS來創建一些流行的手機小圖標。

/* 創建手機小圖標的CSS代碼 */
.icon {
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-weight: 900;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 創建電話圖標 */
.icon-phone:before {
content: "\f095";
}
/* 創建電子郵件圖標 */
.icon-email:before {
content: "\f0e0";
}
/* 創建短信圖標 */
.icon-sms:before {
content: "\f10d";
}
/* 創建地圖圖標 */
.icon-map:before {
content: "\f5b0";
}
/* 創建相機圖標 */
.icon-camera:before {
content: "\f030";
}

使用上述代碼中，我們的圖標將使用Font Awesome 5 Free字體，并根據需要進行了樣式設置。在這里，我們使用了:before偽元素，使我們可以使用Unicode字符/create icons的CSS內容值來顯示圖標的圖像。您只需將圖標添加到頁面的HTML元素中，然后樣式即可自動應用到圖標中。

使用CSS字體小圖標時，請務必檢查使用的頁面上是否已經包含所需字體的相應文件。否則，您可以通過導入此字體文件將其添加到您的CSS中：

/* 導入字體 */
@import url('https://use.fontawesome.com/releases/v5.14.0/css/all.css');

當然，這只是一個基本的CSS字體小圖標示例。您可以使用更多的CSS樣式和不同的字符值創建自己的獨特圖標。

總的來說，CSS字體小圖標為我們的用戶界面帶來了更多的美感和功能，而且很容易使用，只需幾行CSS代碼。