我该如何使用 Fontello 字体？

Question

根据一个来源，这是我如何使用 Fontello 字体的方法：

现在制作符合您需求的自定义图标 Webfont 变得非常简单。首先选择您喜欢的图标。然后更新字形代码（可选），并下载您的 Webfont 打包。Fontello 会生成您需要的一切，然后您可以通过此模块的配置页面上传打包文件！就这么简单！

好的，现在怎么做？我如何在我的网页中调用它们的图标？

- Nancy Collier

Answer 1

在bundle文件夹中，有一个"font"文件夹和一个"css"文件夹。

1. 将"font"文件夹移动到您的项目中。您的项目可能是这样的:

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

2. 包含Fontello CSS。在bundle中的"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，因为它希望您将图标与文本一起使用，但有时您可能需要一个独立的图标。我喜欢使用标签作为独立图标，因此我在fontello css底部添加了以下规则:

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

   现在，如果您将class="icon-ICON_NAME"放在标记上，它将不会有任何不必要的边距。

- Ronen Ackerman

---

感谢您提供如此详细的答案——确实帮助我开始使用Fontello。 - mike

@ronen-ackerman 我建议保持原始文件夹结构不变。这将简化下一次更新 - 只需用更新的文件覆盖文件夹即可。此外，如果您有资产管道，请使用 *-codes.css 并在源中放置正确字体路径的 fontface。这将保护您免受每次字体更新后的编辑。 - Vitaly

第5步中CSS的浏览器支持如何？ - nomad

@nomad https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors浏览器支持非常好，包括IE7及以上版本。 - Ronen Ackerman

无法相信他们的帮助材料实际上没有展示如何在网页项目中使用字体。 - Mitya

Answer 2

更新现有图标：

1. 进入网页https://fontello.com/
2. 使用右上方的按钮来 导入 [...]/fontello/config.json 文件。
3. 搜索新图标并选择它们（只需单击，不需要拖放）
4. 使用右上方的按钮下载更新的归档文件
5. 覆盖 [...]/fontello目录中的所有文件。

- obotezat