Fontello – 让你的网站更多元化

一、什么是Fontello

Fontello是一个免费的图标字体工具，它帮助你在你的网站上嵌入矢量图形，使得你的网站更加丰富多彩。它提供了近2000个可缩放的矢量图标，同时也支持自定义图标。Fontello非常易于使用，用户只需要点击一个图标即可将其添加至自己的定制格式。

给你一个例子，我们可以先以Zip的形式下载Fontello，然后解压至网站路径中的一个目录。例如，我们可以在目录中创建一个新的文件夹名为fonts，将所有的图标文件放在其中。Fontello还提供了一个styles.css文件，它会将所有图标呈现在一个单独的网页上。我们只需要放置该CSS文件至header页面头部，并引用样式表，即可将图标应用到自己的网站中。

二、Fontello如何使用

Fontello的使用非常简单。首先，我们需要前往Fontello的官方网站，上传或拖拽自己的ico或svg图片文件，然后选择希望添加的图标。Fontello会将这些图标打包输出成一个自定义字体文件（相当于一个顶级文字）和一个样式表文件。

在下载自定义字体文件和样式表之后，我们可以将它们添加到一个网页中。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Fontello Test</title>
    <link rel="stylesheet" href="path/to/fontello/fontello.css">
  </head>
  <body>
    <i class="demo-icon fontello-icon"></i>
  </body>
</html>

上述代码中，我们可以看到用<i>标签来添加一个icon图标，其中class属性被设置为demo-icon fontello-icon的值告诉浏览器该元素是Fontello自定义字体“fontello”中的一个图标。在该例中，我们将图标的编码设置为unicode字符“”。这个unicode字符可以在Fontello的样式表中找到。

三、如何定制Fontello

Fontello还允许用户扩展和定制自己的字体图标集合。要做到这一点，用户可以转到Fontello官方网站并点击“Custom Icons”按钮。然后，用户可以上传或拖拽新的ICO或SVG文件进行自定义图标的添加。我们可以根据自己的需要建立一个新的图标库。

当添加自定义图标后，用户可以通过导出样式表和字体文件来使用它们。例如，如果我们建立了名为“myicons”的自定义图标库，我们可以在网页中使用以下代码来添加我们刚刚创建的图标：

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Font Icons</title>
    <link rel="stylesheet" href="path/to/fontello/myicons/fontello.css">
  </head>
  <body>
    <i class="fontello-icon my-custom-icon"></i>
  </body>
</html>

上述代码中，我们可以看到我们在<i>标签的class属性中指定了一个名为“fontello-icon”的类和“my-custom-icon”的自定义图标类名。因此该元素将被渲染成我们自定义图标库中的一个图标。