我正在构建一个集成了浏览器的 Windows 应用程序。我将此浏览器用于应用程序的 GUI。它通过将一串代码推送到浏览器来工作，这通常是您的 index.html 内容。
JS UI lib代码和CSS代码都在head里面，因为我不能使用外部文件。这就像将您的所有网站都放在 index.html 文件中。我知道这是不好的编码方式，但在我的情况下这是唯一的方式。话虽如此，它实际上工作得很好，因为它只需要加载一次。
我使用的 JS UI 库支持 FontAwesome。我想要做的是在 HTML 中也推送很棒的字体，而不是将其作为单独的 .woff 文件，并开始使用一些很酷的图标。
到目前为止我想出了这个( trim 了不必要的东西):
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'FontAwesome';
src: url(data:font/opentype;base64,{{base64 code here}}) format('opentype');
}
</style>
</head>
<body>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
这是行不通的。
我昨天花了一整天的时间试图弄清楚，但运气不佳。
编辑:我可以，但我不想使用 CDN，因为某些应用程序处于离线状态。
最佳答案
您仍然需要输入 fontawesome css 文件的内容。 https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
例如:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -15%
}
.fa-2x {
font-size: 2em
}
.fa-3x {
font-size: 3em
}
.fa-4x {
font-size: 4em
}
.fa-5x {
font-size: 5em
}
.fa-fw {
width: 1.28571429em;
text-align: center
}
.fa-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none
}
.fa-ul > li {
position: relative
}
etc.
目前您似乎只加载了字体文件，没有其他任何内容。
关于javascript - 如何在单个 html 文件中使用 FontAwesome？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44024861/