html 显示字体图标,HTML – 麻烦使用CSS图标字体

这是一步一步的指南：

转到Font Squirrel并下载@ font-face工具包.解压缩,将其重命名为“fonts”,并将其放在与html文件相同的目录中.

将此作为您的html文件：

@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;

}

• RSS
• Star
• Shopping Cart

你应该看到这个：

你在滚！

此外,要了解要使用的字符,请查看Font Squirrel站点上的字符映射.