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代码。