Skip to content
This repository has been archived by the owner on Jul 8, 2021. It is now read-only.

Fontawesome update #51

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

pcrockett
Copy link

Updated to latest version of Fontawesome

@Traumflug
Copy link

Font Awesome folks apparently changed their minds about a few things.

  • The font is split in three packages now (more with a Pro license).
  • Package 'solid' contains about what's usable in this theme. 'brands' and 'regular' not so much, no need to have these font files, then.
  • Web fonts moved from fonts/ to webfonts/.
  • There is a separate CSS file for each package for including the font it's self. Accordingly, one should drop font-awesome/css/font-awesome.min.css and grab font-awesome/css/fontawesome.min.css as well as font-awesome/css/solid.min.css and apply this patch:
    ------------ layouts/partials/head.html ------------
    @@ -13,7 +13,8 @@
      {{ "<!-- Custom Fonts -->" | safeHTML }}
     <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
     <link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    -<link rel="stylesheet" href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}" type="text/css">
    +<link rel="stylesheet" href="{{ "font-awesome/css/fontawesome.min.css" | absURL }}" type="text/css">
    +<link rel="stylesheet" href="{{ "font-awesome/css/solid.min.css" | absURL }}" type="text/css">
     {{ "<!-- Plugin CSS -->" | safeHTML }}
     <link rel="stylesheet" href="{{ "css/animate.min.css" | absURL }}" type="text/css">
     {{ "<!-- Custom CSS -->" | safeHTML }}

@pcrockett
Copy link
Author

Good call. Thanks for this input; it caused me to dig a little deeper into how to properly use Fontawesome.

I did decide to keep brands in there, as it's part of the free version of Fontawesome and I think it would actually be useful. For example, I think it's likely people would want to stick a Discord icon on their website in a "contact" section.

@Traumflug
Copy link

Another change I just found is: the FontAwesome general CSS class is no longer fa, but fas, fab or far, depending on the used set. Which means, class="fa fa-github" no longer works, it's now class="fab fa-github".

To find all instances of the old form, use

grep --exclude-dir node_modules -rn class | grep 'fa '

@pcrockett
Copy link
Author

It turns out we weren't actually using fa fa-github anywhere - it was just fa-github. It still works that way, but I changed it anyway so we're using fas fa-github according to Fontawesome recommendations.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants