Load font-awesome.css with its own icons

🙋Get Help
1

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!

2

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.

5

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

6

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.

7

Hello,
I have cloned your repo and tested it but FontAwesome icons are not working,

Can you please check it?

thanks

8

Yeah Mehul.

Actually that was my question in the first post… I was not able to have the FontAwesome icons working.

9

you might be better embedding the css in your <head>

eg…
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

I think your css doesn’t work because none of your @import rules seem to actually run in default.css

i) When you import a CSS file in Frontity, it is just a string of CSS.
9. Styles - Frontity Docs

you could try something like this in your index.js and pass them all into <GlobalStyle> but it’s messy and I’m not sure whether the url format is right

import fontCss from "../css/fonts.css"
import fontAwesomeCss from "../css/font-awesome/css/font-awesome.css"
import fontelloCss from "../css/fontello/css/fontello.css"

import faeot from "../css/font-awesome/fonts/fontawesome-webfont.eot"
import fawoff from "../css/font-awesome/fonts/fontawesome-webfont.woff"
import fattf from "../css/font-awesome/fonts/fontawesome-webfont.ttf"
import fasvg from "../css/font-awesome/fonts/fontawesome-webfont.svg"

const faCss = css`
@font-face {
    font-family: 'FontAwesome';
    src: url(${faeot}?v=4.0.3);
    src:    url(${faeot}?#iefix&v=4.0.3) format('embedded-opentype'), 
            url(${fawoff}?v=4.0.3) format('woff'),
            url(${fattf}?v=4.0.3) format('truetype'),
            url(${fasvg}?v=4.0.3#fontawesomeregular) format('svg');

    font-weight: normal;
}`

<Global styles={defaultCss} />
<Global styles={layoutCss} />
<Global styles={fontCss} />
<Global styles={faCss} />
<Global styles={fontAwesomeCss} />
<Global styles={fontelloCss} />
10

Check out this demo project that uses WebFontLoader to import Google fonts. Here’s the npm page for WebFontLoader, and here’s the repo. The section you probably want is “Custom”.

Because WebFontLoader uses the window object it doesn’t run in SSR on node, so you need to dynamically import it in a beforeCSR function.

11

FontAwesome has a special package for React (and other frameworks), so no need to embed the CSS files.

Adding custom icons just requires you to create custom components with the icons you want to display.

See: Font Awesome