如何在单个html文件中使用FontAwesome？
[英]How to use FontAwesome inside single html file?
问题描述
I am building a windows app that has integrated browser. 
我正在构建具有集成浏览器的Windows应用程序。 I am using this browser for the app's GUI. 我正在使用该浏览器作为应用程序的GUI。 It works by pushing a string of code to the browser which would normally be your index.html contents. 通过将一串代码推送到浏览器（通常是您的index.html内容）来工作。
JS UI lib code and CSS code are all in the head because I cannot use external files. JS UI库代码和CSS代码全都放在首位，因为我不能使用外部文件。 It's like having all your website inside index.html file.I know this is bad way to code, but its the only way to do it in my situation. 就像将您的所有网站都放在index.html文件中一样。我知道这是不好的编码方式，但这是我遇到的唯一方法。 That being said it actually works quite well because it only needs to load once. 话虽如此，它实际上工作得很好，因为它只需要加载一次。
The JS UI lib that I use supports FontAwesome . 我使用的JS UI库支持FontAwesome 。 What I want to do is push font awesome in the HTML as well instead of it being separate .woff file and start using some cool icons. 我想做的是在HTML中也添加很棒的字体，而不是将其作为单独的.woff文件并开始使用一些很酷的图标。
So far I came up with this (trimmed the unnecessary stuffs): 到目前为止，我想到了这个（修剪掉不必要的东西）：
<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>
which is not working. 这是行不通的。
I've spent the whole day yesterday trying to figure it out without much luck. 昨天我花了一整天的时间试图弄清楚它没有多大的运气。
EDIT: I can but I don't want to use CDN's as some of the apps are offline. 编辑：我可以，但我不想使用CDN，因为某些应用程序处于脱机状态。
5 个解决方案
解决方案1
1 已采纳 2017-05-17 12:44:17
You still need the enter the contents of the fontawesome css file. 您仍然需要输入fontawesome css文件的内容。 https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
eg.: 例如。：
.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.
At the moment it seems like you've only loaded the font file and nothing else. 目前，您似乎只加载了字体文件，而没有其他任何加载。
解决方案2
1 2017-05-17 13:01:56
Download package from http://fontawesome.io/ and add in your project. 从http://fontawesome.io/下载程序包，然后添加您的项目。
Then add the required font awesome css files(/font-awesome-4.7.0/css/font-awesome.min.css) in to the html page. 然后将所需的字体真棒CSS文件（/font-awesome-4.7.0/css/font-awesome.min.css）添加到html页面中。
解决方案3
0 2017-05-17 12:29:22
Here is a quote from the documentation: 这是文档中的报价：
Using CSS Copy the entire font-awesome directory into your project.
See the reference here: http://fontawesome.io/get-started/ 请参阅此处的参考： 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" />
解决方案4
0 2017-05-17 12:31:46
You can do it like this 你可以这样
<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>
解决方案5
0 2017-05-17 12:48:59
You don't have included the .css Files of FontAwesome. 您尚未包括FontAwesome的.css文件。 How about just copying the whole content from following link into your css part? 仅将以下链接中的全部内容复制到您的CSS部分中怎么样？ https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css
works for me 为我工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.