Fontawesome doesn't work without this code

Question

Everytime I want to use fontawesome I've to add this style to the page:

<style>
* {
    font-family: fontawesome !important;
}
</style>

If not it just show a blank square , but do so i can't use another font, any solution i can use fontawesone but don't have to define it ?

Could you please showcase exactly how you're including Font Awesome by providing a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve)? — Obsidian Age, Aug 22 '18 at 03:29

score 1 · Answer 1 · answered Aug 22 '18 at 04:07

This solution is regarding Font Awesome 5. There are two ways of applying font awesome icons. In below snippet, I have shown them. You need to link font awesome new library, otherwise it won't be worked.

.fa {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 900; /* regular style/weight */
}

.my-camera::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 900; /* regular style/weight */
  content: "\f083";
  font-style:normal;
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>




<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->

<br>

<i class="my-camera"></i> <!-- version 5's syntax -->

https://jsfiddle.net/Sampath_Madhuranga/sjn5Lek2/5/

score 1 · Accepted Answer · answered Aug 22 '18 at 04:08

1

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

Try this one, They have change font-family name.

answered Aug 22 '18 at 04:08

Tharaka Nilupul Dharmabandu

386
3
16

Fontawesome doesn't work without this code

2 Answers2