我如何使用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. 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>标签,它不会有任何不必要的保证金.