CSS小图标是网站与应用程序设计中非常常见的元素，可以用于添加更多的美观和视觉效果。下面将介绍如何使用CSS来制作小图标。
首先，我们需要准备一张小图标的图片文件，例如一个文件扩展名为“png”或“svg”的文件。然后，我们用CSS来使这张图片成为我们想要的小图标。
我们可以使用 background 属性来实现其样式。以下是常用的代码示例：

.icon {
display: inline-block;
height: 16px;
width: 16px;
background-image: url('path/to/image-file.png');
}

在上述代码中，我们使用 "icon" 作为类名来表示我们的小图标。 接着，我们定义了图标的高度和宽度分别为 16 像素。我们使用了 background-image 属性来指定背景图片的路径，因此图标将会显示为指定的图像文件。我们还可以使用 background-size 属性来控制图片大小并将其更好地适应定义的高度和宽度。
如果您的小图标是一个宽高比例为 1:1 的正方形，那么我们还可以更简单地使用 background-size 属性来指定一个合适的值：

.icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('path/to/image-file.png');
background-size: cover;
}

此代码与前面的代码是等价的，这是因为我们将高度和宽度定义为相同的像素值。在这种情况下，将使用 "cover" 参数来指定图片的大小，大小被调整来覆盖整个容器。
当我们要使用一些仅由字体组成的小图标时，最好使用不同的方法。例如，FontAwesome 是一种非常流行的字体图标集，可以在网上免费下载。可以使用以下代码来使用FontAwesome：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-xxxx" crossorigin="anonymous">
<i class="fas fa-check"></i>

在这里，我们添加了一个线上资源让我们能够使用FontAwesome的代码库。 通过使用元素并在类名中指定特定字体图标的名称，我们可以轻松地将图标添加到页面中。
总之，CSS使我们可以轻松地创建各种各样的小图标。 这些小图标可以为我们网站和应用程序的用户界面添加更多的信息，使得使用这些平台变得更加美观和易于使用。