我是网页设计和开发的新手,一直在研究不同的样式技术。在我的研究过程中,我遇到了图标字体。尽管我已经研究了许多教程和视频,但尽管经过了数小时的努力,我仍无法成功使用图标字体。
首先,我去了一个提供大量图标字体的网站,选择我喜欢的,生成它们,最后将它们下载到一个文件夹中。但是现在这些图标字体都在一个文件夹里了,怎么办呢?
最佳答案
这是一步一步的指南:
转到 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 网站上的字符映射表。
关于html - 在 CSS 中使用图标字体时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13129995/