如何使用图标字体 [英] How to use icon fonts
问题描述
我是新的网页设计/开发,并一直在玩不同的造型技术。在这期间,我遇到了图标字体。我看到无处不在,试图找到如何使用它们,但所有的视频/教程,我看过没有真正告诉我如何使用它们在CSS。也许提示只是高于我的经验水平。我真的很想知道如何使用它们!
I am new to web design/development and have been just playing around with different styling techniques. During this I came across icon fonts. I looked everywhere to try and find how to use them but all the videos/tutorials I watched didn't really tell me how to use them in css. Maybe the tuts are just above my level of experience. I would really like to know how to use them!
这是我尝试过的:
我去了一个包括大量图标字体的网站,我喜欢的,生成它们,最后下载它们,把它们放入一个文件夹。
I went to a site including a ton of icon fonts, chose the ones I liked, generated them and finally downloaded them which put them into a folder.
我花了几个小时试图找出如何使用新的字体,但不能。
I spent hours trying to figure out how to use the new font, but couldn't.
但现在他们在一个文件夹中,我应该怎么办?我将如何实现这个新的字体?
But now that they are in a folder what should I do? How would I implement this new font?
我真的希望这有意义。简单来说,我的问题是:
I really hope this makes sense. To put it simply, my question is:
如果我想使用图标字体,我该怎么做?什么是一些在线资源教,一步一步,如何使用图标字体?
If I wanted to use an icon font, how would I go about doing this? What are some online resources that teach, step by step, how to use icon fonts?
推荐答案
这里是一步一步的指南:
Here is a step by step guide:
Font Squirrel 并下载 @ font-face
kit。解压缩它,将其重命名为fonts,并将其放在与您的html文件相同的目录中。
Go to Font Squirrel and download the @font-face
kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.
使用它作为您的html文件:
Use this as your html file:
<!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>
您应该会看到:
img src =https://i.stack.imgur.com/aVnXt.pngalt =图标字体示例>
您正在滚动!
此外,要了解要使用的字符,请查看Font Squirrel网站上的字符映射表。
In addition, to know what character to use, check out the Character Map on the Font Squirrel site.
这篇关于如何使用图标字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!