HTML – 麻烦使用CSS图标字体

发布时间：2020-12-14 21:17: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站点上的字符映射.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!