Javascript 如何在单个html文件中使用FontAwesome？_Javascript_Jquery_Html_Css_Font Awesome

Javascript 如何在单个html文件中使用FontAwesome？

javascript jquery html css

Javascript 如何在单个html文件中使用FontAwesome？,javascript,jquery,html,css,font-awesome,Javascript,Jquery,Html,Css,Font Awesome,我正在构建一个集成了浏览器的windows应用程序。我正在将此浏览器用于应用程序的GUI。它的工作原理是将一串代码推送到浏览器中，通常是您的index.html内容 JSUIlib代码和CSS代码都在头部，因为我不能使用外部文件。这就像把你所有的网站都放在index.html文件中一样。我知道这是一种糟糕的编码方式，但在我的情况下，这是唯一的方式。也就是说，它实际上工作得相当好，因为它只需要加载一次我使用的JS UI库支持FontAwesome。我想做的是在HTML中推送字体，而不是将其分开.

我正在构建一个集成了浏览器的windows应用程序。我正在将此浏览器用于应用程序的GUI。它的工作原理是将一串代码推送到浏览器中，通常是您的

index.html

内容

JSUIlib代码和CSS代码都在头部，因为我不能使用外部文件。这就像把你所有的网站都放在index.html文件中一样。我知道这是一种糟糕的编码方式，但在我的情况下，这是唯一的方式。也就是说，它实际上工作得相当好，因为它只需要加载一次

我使用的JS UI库支持

FontAwesome

。我想做的是在HTML中推送字体，而不是将其分开

.woff

文件，并开始使用一些很酷的图标

到目前为止，我提出了以下建议（删减了不必要的内容）：


@字体{
字体系列：“FontAwesome”；
src:url（数据：font/opentype；base64，{{base64 code here}}}）格式（'opentype'）；
}
复古照相机

这是行不通的

我昨天花了一整天的时间想弄明白，但运气不太好

编辑：我可以，但我不想使用CDN，因为有些应用程序处于脱机状态。

以下是文档中的一段引用：

使用CSS 将整个字体目录复制到项目中。在html的文本中，将位置引用到font-awesome.min.css。查看示例，开始使用字体真棒

请参阅此处的参考资料：

您也可以使用带有字体awesoime cdn的链接：

你可以这样做


fa照相机复古版

fa lg

fa-2x

fa-3x

fa-4x

fa-5x

正常

您仍然需要输入css文件的内容

例如：

目前，您似乎只加载了字体文件，而没有加载其他内容。

您没有包含Fontsome的.css文件。将以下链接的全部内容复制到css部分如何？

适用于我

从项目中下载软件包并添加到项目中

然后将所需的字体awesome css文件（/font-awesome-4.7.0/css/font-awesome.min.css）添加到html页面。

您还需要导入字体

.woff

，

.woff2

为什么它必须是一个HTML文件？@evolutionxbox，因为浏览器实际上不是导航到HTML文件，而是一个HTML字符串被推送到它并加载。正如我说的，我需要将所有内容都推到一个index.HTML文件中，我不能使用外部文件。我知道我可以使用CDN，但我避免这样做，因为有些应用程序是离线的。好吧，然后在这里下载FontAwesome软件包，并将其放在您的根目录下。然后使用将css包含到页面中。希望这对你有帮助。

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

you can also use the link with font awesoime cdn:
<link  rel="stylesheet"  src="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.