8

我是网页设计和开发的新手，一直在玩不同的造型技术。在我的研究过程中，我遇到了icon fonts。尽管我研究了许多教程和视频，但尽管付出了数小时的努力，我还是无法成功地使用图标字体。

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

4

1 回答 1

12

这是一个分步指南：

转到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 网站上的字符图。

于 2012-10-29T22:09:26.853 回答