Upgrade process for fontawesome from 4 to 5

E

8

26

We contributed to font-awesome 5 (yea), and we are looking from moving from our existing icons (Symbol set) to font-awesome. Will the naming of icons and usage of font-awesome 5 be backwards compatible with font-awesome 4.7?

IE: Should we go to 4.7 now, and have very easy upgrade to 5.0? OR should we hold off until font-awesome 5 comes out?

Enough answered 7/12, 2016 at 18:55 Comment(0)

T

14

It's not backwards compatible.

I just publish a script to do the migration from 4 to 5 in:

https://github.com/estebandelaf/scripts/blob/master/fontawesome4to5.sh

PS: I know the post is from a year ago, but is the second result in google for "fontawesome migration script 4 to 5".

Thorne answered 27/12, 2017 at 3:38 Comment(3)

Can you please explain what do we need to do with your script? I tried upgrading our existing project from 4.7 to 5.0 directly and have to revert back. – Legging 3/5, 2018 at 17:23

Would've been even better if the comments were in English :) – Sardis 5/10, 2018 at 16:44

Getting errors running this on my Mac: sed: 1: "s/fa[[:space:]]fa-addre ...": bad flag in substitute command: 'I' sed: 1: "./app/pages ...": invalid command code . – Tabriz 1/6, 2020 at 8:16

M

7

Since above mentioned scripts doesn't work for icons like thermometer,battery etc. Created a python script that works for all icons. Below is the link.

https://github.com/abkcode/fontawesome4to5

For details about the upgrade changes visit.

https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Mortar answered 14/1, 2019 at 9:59 Comment(1)

Using Python 3.7.2 the print statements in the script need to be modified to include the print content in parenthesis. print(fpath) print("\nAbove files have been modified") – Dyun 27/2, 2019 at 15:42

B

3

Simply use use.fontawesome.com/releases/v5.10.1/css/v4-shims.css

More details : https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Bedroom answered 6/8, 2019 at 23:20 Comment(0)

U

2

Fontawesome provides v4-shiv.js that transitions old v4 icons into v5 but it's only for the SVG+JS framework.

If you are using the CSS framework with webfonts, here is a jQuery javascript that does the same thing.

https://gist.github.com/timint/fb53929ff196d0a5754188bd93a80cef

Udo answered 18/3, 2018 at 0:37 Comment(5)

Remember to adjust the "fa" to "far" "fab", when needed. – Acciaccatura 10/5, 2018 at 12:37

This is already taken care of: $('.fa.'+fa4).removeClass('fa').removeClass(fa4).addClass(fa5); – Udo 11/5, 2018 at 18:56

Most of the icons that didn't get their name changed did get their "main" class changed. The plugin you suggest only adjusts the "main" class of the icons that changed name. – Acciaccatura 11/5, 2018 at 21:34

I got the list from the official site where it stated "Icon Name Changes Complete List". I updated the list with my own making instead. How about now? – Udo 17/5, 2018 at 21:34

There is now a shim file for the css styles – Mastermind 8/11, 2019 at 18:30

H

2

I have created a python script to upgrade from 4.7 to 5.1 without the need to. It worked best for me. https://gist.github.com/ilanben/38ef4d4545cb74089375af0ceecf439b

Update: Fixed the link which was temporarily broken

Heisser answered 28/6, 2018 at 8:16 Comment(2)

This is not a link to a python script. It's just the same link as someone else already posted. – Disney 15/7, 2018 at 22:9

@Disney thanks for noticing my bad... I have fixed the link to my gist now thanks to you :) – Heisser 16/7, 2018 at 7:49

W

0

This python and shell scripts not properly worked me. I'm using Kendo Framework this reason fontawesome shims script dont change my classes. because shim script load before the component render.

I made own script in node.js. https://github.com/KiPSOFT/fontawesome4to5

Winnifredwinning answered 19/11, 2019 at 15:33 Comment(0)

T

0

I made (yet another) script:

Gist here: https://gist.github.com/cloakedninjas/9e4e029c92a141c547dabdabe9ccbb1d

It's in Node, it uses a CSV input file based off of https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes (copied into Google Sheets and exported as CSV.

The thinking being, if future upgrades follow the same table structure, it will be trivial to re-run.

Tabriz answered 1/6, 2020 at 10:29 Comment(0)

B

0

For those who are looking for NodeJS instead of python.

Please install glob first and use the below script. https://gist.github.com/ronaldaug/07d0359352b154f944039ae6934d711f

It will find and replace all font awesome 4 classes with 5.

Barth answered 18/3, 2022 at 7:12 Comment(0)

Recommended topics

Hot tags