Load font-awesome.css with its own icons

Hey there!

I know Global is the way to import any external css needed on our frontity project. But I am facing something and I am not able to know why.

In my index.js (Root component) I have

import defaultCss from "../css/default.css"
import layoutCss from "../css/layout.css"

And then

    <Global styles={defaultCss} />
    <Global styles={layoutCss} />

Then, the default.css file contains

@import url("fonts.css");
@import url("fontello/css/fontello.css");
@import url("font-awesome/css/font-awesome.min.css");

And within the font-awesome.min.css there is…

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

But when I have in my html

<i class="fa fa-facebook"></i>

I do not see inspecting that element any css related with the class .fa above.

Is there something I am missing when importing the css?

Thanks in advance!

Hi @adpabloslopez

Can you provide a link to a repo so that members of the Frontity community can look at your code and clone your project in order to be able to help you. Thanks.

Hello @adpabloslopez ,

I’m not sure if this is best practice but I use react-icons.

npm install react-icons --save
import { FaBeer } from 'react-icons/fa';


<h3> Lets go for a <FaBeer />? </h3>

Cheers,
Maurice

Hey there!

Thanks for your answers!

Please, find the repo here: https://github.com/adpablos/alpalo-frontify.git. The code is in the branch feature/profile.