我想创建一个不依赖任何其他文件的单个文件html文档。 font-awesome包含一个svg字体,可以嵌入html文档和@ font-face中的引用。但我不知道该怎么做。
我刚刚将svg复制到了html。
<!DOCTYPE html>
<html lang="en">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata></metadata>
<defs>
<font id="fontawesomeregular" horiz-adv-x="1536">
<font-face units-per-em="1792" ascent="1536" descent="-256" />
<missing-glyph horiz-adv-x="448" />
<glyph unicode=" " horiz-adv-x="448" />
<glyph unicode="	" horiz-adv-x="448" />
....
other more glyphs
</font>
</defs>
</svg>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
</head>
<body>
<div>
<i class="fa fa-github"></i>
</div>
</body>
我还更改了font-awesome.css文件。将@ font-face的src属性更改为uri
@font-face {
font-family: 'FontAwesome';
src: uri('fonts.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
但是我有一个很大的空白区域,字体很棒的图标显示为一个空白框。