Font Awesome inline within single, portable HTML file

Question

I have an HTML file that is supposed to be portable as in just an HTML file and nothing else. This means I usually inline all styles/scripts in their content and it works quite well. I usually link to CDN content if I want to keep HTML clean, but often for offline use, I embed everything. All CSS/All JS there is to include goes directly to header/footer/body.

I've done exactly the same thing for Font Awesome which is a bit problematic because except CSS file I needed to convert woff/woff2 font files that normally stay next to them into a binary representation.

This is how it normally looks:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

This is its binary representation (just a few lines as it's quite large)

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.eot?");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAATmsAA0AAAADHuwAATlSAUuFYAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACZThEICor0YIjOQAE2AiQDnzALnzQABCAFiisH4i5bMnuSATLvp1Eyvq0KTDRu5CummzsFug2g5kWqjHSuhDve3Urk1BBxZf////+/72iIOaWzdbZjx

I've skipped including EOT/TTF/SVG (removed src for them) and simply replaced WOFF2/WOFF as that's supposed to be enough for modern support.

And it is! It works. However only in one way.

<style>
    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
    }

    .tps::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1ea";
    }

    .twitter::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f099";
    }
</style>
<span class="twitter"></span>

Above code works

<span class="fas fa-camera"></span>

Above code doesn't work. This is how it looks (first 3 are using <style> approach):

If I switch to online using

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />

It works both ways which leads me to think there is a difference between those 2 ways of using Font Awesome. I tried to build it in a 3rd way thinking I may just need to change how I define things but using something like this didn't go well.

<span style='font-family: "Font Awesome 5 Brands"; content: "\f099"; font-weight: 400;'></span>

When I checked the source of all.css the style just defines this:

.fa-twitter:before {
  content: "\f099"; }

My 3 questions:

1. What is the difference between methods using <style></style>, which basically wraps the same thing that all.css does already, and using class "fab fa-twitter"
2. Any clue why it's behaving differently for those 2?
3. Any workaround?

Edit:

• here's JSFiddle showing an example https://jsfiddle.net/mfzvxw38/1/ I know it's long

Answer 1

It seems I've made huge mistake and during replacement/minification process I've broken classes.

What I expected

.fa-500px:before {
    content: "\f26e";
}

.fa-accessible-icon:before {
    content: "\f368";
}

.fa-accusoft:before {
    content: "\f369";
}

What I actually had in the code (which I didn't go thru after minifying).

.fa-car-side:before {
    content: "ï—¤"
}

.fa-caravan:before {
    content: ""
}

.fa-caret-down:before {
    content: ""
}

Therefore having portable all.css file is possible and works as expected.

Answer 2

You’ll likely need to copy out all the fa- icon classes you want to use from all.css, or inline the entire thing.

Right now, you are mixing that approach, with an approach to apply the Font Awesome icons to existing HTML, which is typically used when you don’t have the option to modify the HTML yourself: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

1. What is the difference between methods using , which basically wraps the same thing that all.css does already, and using class "fab fa-twitter"

The result is the same in both cases, but Font Awesome already comes with the CSS classes you need.

It seems like you’re mixing the approach of using the provided classes (ex. fab fa-twitter) by inlining some of them, and this custom approach of writing your own CSS classes. That second option is intended for situations where you can’t modify the HTML yourself.

Any clue why it's behaving differently for those 2?

Either you need a custom CSS class for the camera icon as well (and any other icons you want). Or, if you are planning on using many icons

.camera::before {
  font-family: "Font Awesome 5 Free";
  content: "\f030";
}

…or, if you are using many icons or want the convenience of following the existing Font Awesome class names, you can inline the entire all.css file. Currently, it looks like you’re only inlining the @font-face declaration, but you also need all of the icon class name CSS, if you want to use them in your HTML:

/* From https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.css */

.fa-camera:before {
  content: "\f030"; }

This is very similar to the CSS you’re trying to add inline here:

<!-- From the question -->
<span style='font-family: "Font Awesome 5 Brands"; content: "\f099"; font-weight: 400;'></span>

Font Awesome uses the CSS content property, which is intended for use with pseudo-elements like ::before and ::after. That won’t work inline in the HTML, as it needs to be applied pseudo-element.

Hope that’s helpful!