CODEWITHSUNDEEP
htmlfont-awesome
Daniel Gontar
Daniel Gontar

Reputation: 157

Changing design of font-awesome HTML element

I am trying to color and/or design font-awesome html element to my needs. However it does not change it's original design. why ? here is the code:

<i class="fab fa-facebook-f" style="color:white"></i>

Upvotes: 0

Views: 315

Answers (4)

goediaz
goediaz

Reputation: 652

You just need to add this tag at the button of your body your <body>. 

<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js</script>

FontAwesome is a Javascript file, not a CSS. It needs to be loaded after the DOM.

.icon-color {
  color: #3b5998;
}
<head>
</head>
<body>
  <i class="fab fa-facebook-f fa-3x icon-color"></i> 
  <script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
</body>

Here is a fiddle so you can play with it.

You can also do it as Inline style

<i class="fab fa-facebook-f fa-3x icon-color" style="color: #3b5998"></i>

Upvotes: 1

Skander Jenhani
Skander Jenhani

Reputation: 75

move the fontawesome-all.js into your project directory, to avoid path errors. and add this into your code to load the js files.

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

then you can start placing icons in your HTML's <body>

Upvotes: 0

Mohd Tabish Baig
Mohd Tabish Baig

Reputation: 452

You need to write <i class="fa fa-facebook-f" style="color:white"></i> fa is written as fab Thank you.

Upvotes: 0

Qontrol
Qontrol

Reputation: 95

You need to include: <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> in your <head>

Upvotes: 0

Related Questions