Question

我正在构建一个集成浏览器的Windows应用程序。我正在将此浏览器用于应用程序的GUI。它的工作原理是将一串代码推送到浏览器，这通常是你的index.html内容。

JS UI lib代码和CSS代码都在脑海中，因为我无法使用外部文件。这就像把你所有的网站都放在index.html文件中一样。我知道这是一种不好的编码方式，但它是在我的情况下做到这一点的唯一方法。据说它实际上运行得很好，因为它只需要加载一次。

我使用的JS UI lib支持FontAwesome。我想要做的是在HTML中推送字体真棒，而不是单独的.woff文件，并开始使用一些很酷的图标。

到目前为止，我想出了这个（修剪了不必要的东西）：

<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，因为有些应用程序处于离线状态。

Answer 1

您仍然需要输入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.

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

Answer 2

从http://fontawesome.io/下载包并添加您的项目。

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

Answer 3

以下是文档中的引用：

使用CSS 将整个font-awesome目录复制到项目中。在你的html中，引用你的font-awesome.min.css的位置。查看示例以开始使用Font Awesome！

请参阅此处的参考资料：http://fontawesome.io/get-started/

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

Answer 4

你可以这样做

＆＃13;

<html>
<head>
  
    
    <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
    <!-- ADD THIS LINE -->
    
</head>
<body>
    <i class="fa fa-camera-retro"></i> fa-camera-retro <br/>
    
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg <br/>
<i class="fa fa-camera-retro fa-2x"></i> fa-2x <br/>
<i class="fa fa-camera-retro fa-3x"></i> fa-3x <br/>
<i class="fa fa-camera-retro fa-4x"></i> fa-4x <br/>
<i class="fa fa-camera-retro fa-5x"></i> fa-5x <br/>

<i class="fa fa-shield"></i> normal<br>


</body>
</html>

＆＃13;

Answer 5

您没有包含FontAwesome的.css文件。如何将整个内容从以下链接复制到您的CSS部分？ https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

适合我

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

5 个答案: