我是网页设计和开发的新手,并且一直在玩不同的造型技术.在我的研究过程中,我遇到了图标字体.虽然我调查了很多教程和视频,但是尽管付出了很多努力,但我还是无法成功地使用图标字体.
首先,我访问了一个提供大量图标字体的网站,选择了我喜欢的图标,生成它们,最后将它们下载到一个文件夹中.但是现在这些图标字体在文件夹中,我该怎么办？
解决方法
这是一步一步的指南：
转到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站点上的字符映射.
