我如何使用fontello字体？

Question

据一位消息人士透露，这就是我使用Fontello字体的方式：

  

现在，根据您的需求制作自定义图标webfont是微不足道的。首先，选择您喜欢的图标。然后更新字形代码（可选），并下载您的webfont包。 Fontello生成您需要的一切，然后通过此模块的配置页面上传捆绑包！就这么简单！

好。怎么办？如何在我的网页上调用他们的一个图标？

Answer 1

在捆绑包内，有“font”文件夹和“css”文件夹。

1. 将字体文件夹移动到项目中。您的项目可能如下所示：

   /project-root
   -- /stylesheets
   -- /images
   -- /javascripts
   -- /font 

2. 包括Fontello css。在捆绑包中的“css”文件夹中，您将看到：

   [yourfontname]-codes.css
   [yourfontname]-embedded.css
   [yourfontname]-ie7-codes.css
   [yourfontname]-ie7.css
   [yourfontname].css

   对于大多数情况，您只需要[yourfontname].css。在项目中包含样式表。

3. 内部[yourfontname].css是导入字体的@font-face规则。确保字体的路径指向正确的位置。默认情况下，他们会查看../font/。

4. 要使用图标，请将class="icon-ICON_NAME"添加到要包含图标的元素中。您可以在[yourfontname].css底部看到图标名​​称列表。

5. 可选： Fontello在图标上放置margin-right: .2em因为它希望您使用带有文字的图标，但有时您可能需要一个独立的图标。我喜欢将<i>标签用于独立图标，因此我将以下规则添加到fontello css的底部：

   i[class^="icon-"]:before, i[class*=" icon-"]:before {
     margin: 0;
   }

   现在，如果您将class="icon-ICON_NAME" 放在<i>代码上，则不会有任何不必要的保证金。