使用图标字体与CSS麻烦(Trouble using icon fonts with CSS)

2019-07-03 10:20发布

我是新的网页设计和开发，并已被玩弄不同的造型技巧。在我的研究过程中，我遇到了图标字体 。虽然我已经调查了一些教程和视频的，我一直无法成功地利用图标字体，尽管许多小时的努力。

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

Answer 1:

这里是一个分步指南：

转到字体松鼠和下载@font-face套件。将它解压缩，将其重命名为“字体”，并把它放在同一目录中的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>

你应该看到这一点：