font-face - 如何使用 fontello 字体？

Question

根据一个消息来源，这就是我使用 Fontello 字体的方式：

现在制作自定义图标 webfont 非常简单，完全可以满足您的需求。首先，选择您喜欢的图标。然后更新字形代码（可选），并下载您的 webfont 包。Fontello 生成你需要的一切，然后你通过这个模块的配置页面上传包！就这么容易！

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

score 103 · Accepted Answer

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

将字体文件夹移动到您的项目中。您的项目可能如下所示：
```
/项目根
-- /样式表
-  /图片
-- /javascripts
-- /字体
```
包括 Fontello css。在包中的“css”文件夹中，您将看到：
```
[你的字体名称]-codes.css
[你的字体名称]-embedded.css
[你的字体名称]-ie7-codes.css
[你的字体名称]-ie7.css
[你的字体名].css
```
大多数情况下，您只需要[yourfontname].css. 在您的项目中包含该样式表。
里面[yourfontname].css是@font-face导入字体的规则。确保字体的路径指向正确的位置。默认情况下，他们会查看../font/.
要使用您的图标，请添加class="icon-ICON_NAME"到您想要拥有图标的元素。您可以在底部看到图标名称列表[yourfontname].css。
可选： Fontellomargin-right: .2em在图标上放一个，因为它希望您使用带有文本的图标，但有时您可能需要一个独立的图标。我喜欢<i>为独立图标使用标签，所以我将以下规则添加到 fontello css 的底部：
```
i[class^="icon-"]:before, i[class*="icon-"]:before {
  边距：0；
}
```
现在，如果您放置class="icon-ICON_NAME" 一个<i>标签，它将不会有任何多余的边距。

score 0 · Accepted Answer

要更新现有图标：

2 回答 2