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

Font awesome => upgrade to FA5 #1364

Closed
Nikeo opened this Issue Jan 8, 2018 · 7 comments

Comments

Projects
None yet
3 participants
@Nikeo
Contributor

Nikeo commented Jan 8, 2018

Why ?

Licence ?

This upgrade raises the question of the FA5 licensing.

As wp.org theme author, we must use GPL compatible licenses. CC BY ... licenses don't fall in this category.

In the Font Awesome Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.

This means that we unfortunately won't be authorized to use the fancy and fully backward compatible new svg with .js way.
We can use

  • all icons packaged as web and desktop font files. SIL OFL 1.1 License => GPL compatible
  • the MIT license applies to all non-font and non-icon files, like css, scss, etc....

Which is enough for our need, but not the preferred way to use FA.

How ?

The FA team has published a guide here : https://fontawesome.com/how-to-use/upgrading-from-4

But here are the specific part for us

Upgrading the assets

The fa assets will be updated in assets/shared/fonts/fa

2018-01-08_10-15-24

Soooo, the integration of FA5 in the Customizr theme is pretty much documented here
: https://fontawesome.com/get-started/web-fonts-with-css

I would like to include the sass preprocessing to build our own fontawesome-all.css
https://fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass
Even if the build will eventually be very close to the default one.

Upgrading the html markup

Now it looks like this

<body>
  <!--user icon in two different styles-->
  <i class="fas fa-user"></i>
  <i class="far fa-user"></i>
  <!--brand icon-->
  <i class="fab fa-github-square"></i>
</body>

We need to update the class name everywhere

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

We need to make sure we don't miss any previous icon ?

Version 5 changed some things. Brand icons are now their own style and references to them use the fab prefix. Also, aliases are no longer - there is one official name for an icon. Speaking of which, some icon names have changed between versions. Also, any icon ending with -o has been moved to the regular style which uses the far prefix.

Note : This upgrade will also impact all the other repos

  • pro-bundle
  • all js fmk
  • ...

and

  • hueman
  • hueman-addons
  • hueman pro addons
  • wfc
  • fpu ?
  • ...
@Nikeo

This comment has been minimized.

Contributor

Nikeo commented Jan 8, 2018

@eri-trabiccolo following the discussion about far or fas, font awesome says that the new default is more fas than fab here : https://fontawesome.com/how-to-use/svg-with-js#styles-and-prefixes

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

So let's use fas.

@eri-trabiccolo

This comment has been minimized.

Contributor

eri-trabiccolo commented Jan 12, 2018

UPDATE:

  1. we cannot really keep the "fa" class as "fa fab" will make the 'fa' rule override the 'fab' rule (they use two different font families). We could "override" this behavior, of course...
  2. some icons have been removed, at least one of our list has no substitute.
    [all the social icons except for the solid and one regular (fa-envelope-o) below will be displayed as fab (brands) ]

SOLID ICONS

Here's the list of the social icons that need the to be prefixed with "fas "

array( 'fa-envelope',
        'fa-envelope-square',
        'fa-mobile',
        'fa-phone',
        'fa-phone-square',
        'fa-rss',
        'fa-rss-square',
        'fa-share-alt',
        'fa-share-alt-square'
)

REMOVED ICONS WITH REPLACEMENTS (meaning that we force the replacement)

array(
        'fa-bitbucket-square'     => 'fa-bitbucket',
        'fa-facebook-official'    => 'fa-facebook-f',
        'fa-google-plus-circle'   => 'fa-google-plus',
        'fa-google-plus-official' => 'fa-google-plus',
        'fa-linkedin-square'      => 'fa-linkedin',
        'fa-youtube-play'         => 'fa-youtube'
)

the above replacements will happen only for the already set socials of course

REMOVED ICONS WITH NO REPLACEMENTS

'fa-meanpath'

OTHER VISIBLE CHANGES

  • fa-facebook now is displayed by fa with the former fa-facebook-square
  • fa-google-plus now is displayed by fa with the former fa-google-plus-circle
  • we add the new fa-google-plus-g which is the former fa-google-plus
  • fa-linkedin now is displayed by fa with the former fa-linkedin-square
  • we add the new fa-linkedin-in which is the former fa-linkedin
  • fa-youtube now is displayed by fa with the former fa-youtube-play

Here's a comparison between the two versions with the current (meaning the latest customizr stable version) set of icons.
With fa 4
before

With fa 5
after_correspondency

You can see there are repetitions, that are mostly due to the missing icons forcing process.
Users have to check their social icons display as they want otherwise they have to change them.

@Nikeo

This comment has been minimized.

Contributor

Nikeo commented Jan 12, 2018

  • About fa-meanpath http://fontawesome.io/icon/meanpath/, what happens after the update if a user has selected it => make sure there's no critical error in both front end and customizer
@eri-trabiccolo

This comment has been minimized.

Contributor

eri-trabiccolo commented Jan 15, 2018

Set of icons for the test:
(below already with the new icons in place)
2018-01-15_13-09-52

@eri-trabiccolo

This comment has been minimized.

Contributor

eri-trabiccolo commented Jan 15, 2018

About fa-meanpath http://fontawesome.io/icon/meanpath/, what happens after the update if a user has selected it => make sure there's no critical error in both front end and customizer

The icon will just be not displayed as you can see in the customizer as you can see above.
Same in front (just a "blank" space ).
Additionally, all the icons removed from the list, like google-plus-circle, will not appear in the select, producing this:
2018-01-15_13-19-58

@eri-trabiccolo

This comment has been minimized.

Contributor

eri-trabiccolo commented Jan 15, 2018

@nickreiner

This comment has been minimized.

nickreiner commented Jan 16, 2018

Are some icons like the Patreon one intentionally left out? Can't find them through the Customizer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment