CSS字符图标是一种基于字体文件的图标，而不是像普通图像一样使用像素来描述的图片。这些字体文件包含了一系列的符号，我们能够通过CSS样式去引入并使用它们。这两种大型的图标库IcoMoon和FontAwesome是最受欢迎的选项之一。

在使用这些图标前，我们需要下载字体文件以及CSS文件。该CSS文件包含了符号的类名和Unicode编码，这些Unicode码的值和字体文件中的符号相对应。在HTML文件的头部，你需要使用link标签或@import语法链接这些文件。

<!-- 引入CSS -->
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- 然后使用符号 -->
<i class="fas fa-coffee"></i>

在这个示例中，我引入了FontAwesome库，使用了样式类"fas fa-coffee"去渲染了一个咖啡杯的图标。

为了使用另一个图标，我们需要找到相应的类名和Unicode编码。例如，我们可以在FontAwesome的官方网站上找到一个类名为"fas fa-heart"的图标，同时这个图标的Unicode编码为f004。

<!-- 渲染"fas fa-heart"图标 -->
<i class="fas fa-heart"></i>
<!-- 或者，您也可以使用Unicode编码 -->
<i class="fa"></i> \f004

你也可以在CSS文件中自定义这些符号的样式，例如改变它们的颜色，大小或者旋转角度。我们只需要在样式类中找到对应的属性进行修改。

总结起来，这就是使用CSS字符图标的基本原理。你需要下载字体文件以及CSS文件，并在HTML文件中引入它们。然后，通过对应的类名或Unicode编码，你就能轻而易举地使用你所需要的图标了。