CSS 如何使用Fontello添加一个额外的图标，而不需要下载新的图标包

在本文中，我们将介绍如何使用Fontello添加一个额外的图标，而不需要下载新的图标包。Fontello是一个在线的字体图标工具，它允许用户选择自己需要的图标并下载相应的字体文件和CSS样式表。

阅读更多：CSS 教程

什么是Fontello

Fontello是一个提供自定义图标的工具，它提供了一系列的开源图标库和字体文件。用户可以根据自己的需求选择需要的图标，并生成与之对应的字体文件和CSS样式表。使用Fontello，你可以创建一个自己的图标库，并将其用于网页或应用程序中。

要开始使用Fontello，首先需要访问它的官方网站（https://fontello.com/）。在主页上，你可以看到一个图标选择器，以及一些已经准备好的图标库供你参考。

在图标选择器中，你可以通过点击不同的图标来选择你需要的图标。可以使用搜索框来查找特定的图标，也可以通过浏览分类来找到你需要的图标。

请注意，每个图标都有一个唯一的编码，你需要记住或记录下这个编码以便后续使用。

在选择图标后，你可以点击右上角的“Customize Selected”按钮，进入图标库的自定义页面。在这个页面上，你可以对已经选择的图标进行编辑和调整。

例如，你可以调整图标的大小、颜色、阴影等。你还可以添加自定义的CSS类，以便在项目中使用这些图标。

编辑完成后，点击右下角的“Save Session”按钮保存你的选择。然后，你可以点击右上角的“Get the bundle”按钮，下载你自定义的图标库。

在下载页面上，你可以选择下载字体文件和CSS样式表的格式。通常，我们建议下载woff2格式的字体文件，并将其与CSS样式表一起保存在你的项目文件夹中。

一旦你下载了字体文件和CSS样式表，你就可以将其应用到你的网页或应用程序中。以下是一些示例说明如何使用Fontello生成的图标。

在你的HTML文件中，你需要引入下载的CSS样式表。你可以使用标签将样式表链接到你的HTML文件中，如下所示：

<link rel="stylesheet" href="path/to/fontello.css">

确保将路径path/to/fontello.css替换为你实际保存CSS样式表的路径。

一旦样式表被引入，你可以使用以下HTML代码来添加一个图标：

<i class="icon icon-[icon-code]"></i>

请将[icon-code]替换为你选择的图标的编码。

例如，如果你选择的图标的编码是abcd，你可以使用以下代码来添加该图标：

<i class="icon icon-abcd"></i>

如果你需要自定义图标的样式，你可以使用CSS选择器来选择特定的图标，并为其添加自定义样式。

例如，如果你想将图标的颜色更改为红色，你可以使用以下CSS代码：

.icon-abcd {
  color: red;
}

通过Fontello，我们可以方便地扩展图标库，添加一个额外的图标而不需要下载新的图标包。使用Fontello的步骤包括选择图标、自定义图标库、下载字体文件和CSS样式表，以及在项目中使用生成的图标。

希望本文介绍的内容对你在使用Fontello时有所帮助！