Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Font Awesome library #953

Closed
msberends opened this issue Dec 29, 2018 · 2 comments · Fixed by #979

Comments

@msberends
Copy link

commented Dec 29, 2018

Please update the Font Awesome library, I now have to look for the 4.7 reference, while Font Awesome 5 is out already. I first wondered why for example this wouldn't work in my navbar:

    - text: 'Manual'
      icon: fa-book-open
      href: 'reference/'

The reason appeared to be that fa-book-open is not available in older Font Awesome libraries.

Please update it, and replace the fa class with fas in your CSS classes as described here: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use.

Thanks!

@msberends msberends changed the title Update fontawesome library Update Font Awesome library Dec 29, 2018

@msberends

This comment has been minimized.

Copy link
Author

commented Dec 29, 2018

For those who cannot wait: you can add the reference to the updated library yourself by updating the <head> on all your pages as follows:

  • Add extra.js to the pgdown folder (if you haven't already)
  • Add the following code this this file:
$('head').append('<!-- Updated Font Awesome library --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">');

(got text from https://fontawesome.com/start)

Now you can you use Font Aweome 5.6.3! Everything on https://fontawesome.com/icons is now available for you website 😉

EDIT:
Icons for brands (like fa-github for the GitHub icon) are now in a different font file than the other icons. To also support icons for brands:

  • Add extra.css to the pgdown folder (if you haven't already)
  • Add the following code this this file:
/* Support icons for brands using Font Awesome by forcing the right font family */
.fab {
    font-family: "Font Awesome 5 Brands" !important;
}
navbar:
  left:
    - text: 'Home'
      icon: 'fa-home'
      href: 'index.html'
    - text: 'Source Code'
      icon: 'fab fa-gitlab'
      href: 'https://gitlab.com/msberends/AMR'

So Home does not need the fab, since fa-home is not a brand icon, but fa-gitlab is.

@jayhesselberth

This comment has been minimized.

Copy link
Collaborator

commented Jan 7, 2019

fontawesome is not on cdnjs yet; we will migrate once it's available there.

Needs FortAwesome/Font-Awesome#12323.

jayhesselberth added a commit that referenced this issue Feb 28, 2019
Update fontawesome to 5.7.1
fontawesome deprecated the fa prefix in version 5. now using the fas and fab (for brands) prefixes.

Closes #953
jayhesselberth added a commit that referenced this issue Mar 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.