如何使用fontello字体？

Question

据一位消息人士透露，这是我如何使用Fontello字体：

现在是微不足道的做一个自定义图标web字体，正好适合您的需求。首先，选择你喜欢的图标。然后更新字形代码（可选），并下载您的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. Inside [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>标签，它不会有任何不必要的保证金。