在 CSS 中使用图标字体时遇到问题答案

【问题标题】：Trouble using icon fonts with CSS在 CSS 中使用图标字体时遇到问题
【发布时间】：2012-10-19 06:16:22
【问题描述】：

我是网页设计和开发的新手，并且一直在尝试不同的样式技术。在我的研究过程中，我遇到了icon fonts。尽管我研究了许多教程和视频，但经过数小时的努力，我仍然无法成功使用图标字体。

首先，我去了一个提供大量图标字体的网站，选择我喜欢的字体，生成它们，最后将它们下载到一个文件夹中。但是现在这些图标字体都在一个文件夹里了，我该怎么办呢？

【问题讨论】：

像普通字体一样使用它：font-face.com 找出哪个字符对应于您要使用的图标（尝试字体簿/字符查看器）
inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3 对于它的价值，我建议不要这样做。当您使用带有图标的字体时，您会看到非常真实的文字。如果不是文本，则不应使用字体。总是有精灵、矢量图等。
感谢 cmets。启发48，它可以工作，但即使用户没有安装该字体，它也会工作吗？和布拉德，我会调查那些谢谢你
fontello.com 使这个过程变得简单（不附属，只是一个满意的用户）。

标签： html css icon-fonts

【解决方案1】：

这是一个分步指南：

转到Font Squirrel 并下载@font-face 套件。解压，重命名为'fonts'，和你的html文件放在同一个目录下。

将此作为您的 html 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    li {
      list-style-type: none;
    }
    [data-icon]:before {
      font-family: 'ModernPictogramsNormal';
      content: attr(data-icon);
      speak: none;
      padding:0 5px;
    }
    </style>
</head>
<body>
  <ul>
    <li data-icon="^">RSS</li>
    <li data-icon="*">Star</li>
    <li data-icon=".">Shopping Cart</li>
  </ul>
</body>
</html>

你应该看到这个：

你在滚动！

此外，要了解要使用的字符，请查看 Font Squirrel 网站上的字符图。

【讨论】：

太棒了！所以只是为了更多的知识，为什么@font-face 中有这么多 url() 呢？这些链接是否指向他们所有的字体？还是不同的格式？
不同的浏览器需要/能够使用不同类型的字体文件（我知道 .eot 用于 IE，.svg 用于 iOS 等）。最好将它们都包括在内。
如何识别哪个data-icon 属性是哪个符号，而我只有具有一些unicode 属性和一些针对d 的值的文件。我无法理解？