HTML – 麻烦使用CSS图标字体_html-js-css

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

首先,我访问了一个提供大量图标字体的网站,选择了我喜欢的图标,生成它们,最后将它们下载到一个文件夹中.但是现在这些图标字体在文件夹中,我该怎么办？

解决方法这是一步一步的指南：

转到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图标字体全部内容，希望文章能够帮你解决HTML – 麻烦使用CSS图标字体所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1108763.html