CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-awesome
Todor Donev
Todor Donev

Reputation: 33

How to use FontAwesome inside single html file?

I am building a windows app that has integrated browser. I am using this browser for the app's GUI. It works by pushing a string of code to the browser which would normally be your index.html contents.

JS UI lib code and CSS code are all in the head because I cannot use external files. 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. That being said it actually works quite well because it only needs to load once.

The JS UI lib that I use supports 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.

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.

Upvotes: 3

Views: 2107

Answers (5)

Kayis Rahman
Kayis Rahman

Reputation: 352

Download package from http://fontawesome.io/ and add in your project.

Then add the required font awesome css files(/font-awesome-4.7.0/css/font-awesome.min.css) in to the html page.

Upvotes: 1

FFirmenich
FFirmenich

Reputation: 5921

You don't have included the .css Files of FontAwesome. How about just copying the whole content from following link into your css part? https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

works for me

Upvotes: 0

user936965
user936965

Reputation:

You still need the enter the contents of the fontawesome css file. 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.

Upvotes: 1

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

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>

Upvotes: 0

margarita
margarita

Reputation: 894

Here is a quote from the documentation:

Using CSS Copy the entire font-awesome directory into your project. In the of your html, reference the location to your font-awesome.min.css. Check out the examples to start using Font Awesome!

See the reference here: 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" />

Upvotes: 0

Related Questions