INRIA/scikit-learn-mooc

Social media icons not being correctly displayed on FUN

ArturoAmorQ opened this issue · 11 comments

ArturoAmorQ commented

The rendering in FUN:

Screenshot from 2022-04-08 16-31-32

The rendering in the Jupyter Book:

Screenshot from 2022-04-08 16-39-19

ArturoAmorQ commented

@brospars do you know if FUN can support fontawesome?

brospars commented

Yes it does but fontawesome v4 which uses fa fa-iconinstead of fab fa-icon

ArturoAmorQ commented

Is it possible to upgrade it to v5?

brospars commented

Not on our side and I doubt @openfun can do it easily

GaelVaroquaux commented

Can you use both tags (for both versions of fontawesome)?

brospars commented

Unfortunately it wouldn't work on the Jupyterbook side since font awseome v5 is now splitted in multiple fonts (free, brands, etc).
But I guess I could add an alias .fab for the .faclass in our css. The only drawback is that new icons won't work with this workaround

Thank you, I didn't think of that earlier...

brospars commented

It is now fixed.

GaelVaroquaux commented
brospars commented

Fontawesome uses css classes and pseudo-elements to display an icon using a font. For example :

.fa {
  font: normal normal normal 14px/1 FontAwesome;
}

.fa-github::before {
  content: "\f09b";
}

...

So I simply added a rule in our custom css so that .fab is the same as .fa like so :

.fa, .fab{
  font: normal normal normal 14px/1 FontAwesome;
}
GaelVaroquaux commented