Font Awesome Update

Huggy

Hi all,

New here been poking about with a new installation and while creating categories noticed that font awesome had some icon's missing.

So I was thinking would be a simple case of just updating the files, well that was the plan, now I got no icons!

So does anyone have some insight on this?

I've done a rebuild now so all working again, but would still like to upgrade the icon selection.

Thanks

Dave

<baris>

After updating fontawesome you will have to set the path variable in variables.less.

@fa-font-path: "./vendor/fontawesome/fonts";

NodeMonster

@baris said in Font Awesome Update:

After updating fontawesome you will have to set the path variable in variables.less.

@fa-font-path: "./vendor/fontawesome/fonts";

Sorry for bumping. I attempted to update FA with the latest version and suffered a series of broken icons after rebuild or upgrade. The paths in variables.less and path.less are correct coupled with some regular font files rename, it seems quite a chore to patch it without going deeper into the core. Do someone have a guide on this, or it's better giving up the idea patching it?

PitaJ

The latest font awesome versions are not backwards compatible, so of course these will break all sorts of things.

You could try switching to forkawesome instead, which is community driven updates to FA.

NodeMonster

I have successfully patched font awesome to 5.6.3. Both free or pro should work fine. As a total newbie to nodebb, there might be issues that I am not aware yet. Below is a simple script to assist any future updates.

I have not fully tested the procedures. Proceed at your own risk!

#!/bin/bash
#########################################################################################################
## copy latest font awesome's /webfonts/* to public/vendor/fontawesome/fonts                           ##
## copy latest font awesome's /less/_variables.less to public/vendor/fontawesome/less/variables.less   ##
## copy latest font awesome's /less/_icons.less to public/vendor/fontawesome/less/icons.less           ##
#########################################################################################################

latestfa=`curl -s https://github.com/FortAwesome/Font-Awesome/releases | grep "tree" | head -1 | grep -o -P '(?<=title=).*(?=>)'`

if ! grep $latestfa public/vendor/fontawesome/less/variables.less; then
	echo "Latest Font Awesome not copied yet!"	
	exit 0;
fi

#Use back nodebb preferred font sizes
sed -i 's#../webfonts#./vendor/fontawesome/fonts#; s/16px/14px/; s#2em#(30em / 14)#' public/vendor/fontawesome/less/variables.less

#css for latest FA fonts
cat <<EOF > public/vendor/fontawesome/less/path.less
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  src: url("@{fa-font-path}/fa-brands-400.eot");
  src: url("@{fa-font-path}/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("@{fa-font-path}/fa-brands-400.woff2") format("woff2"), url("@{fa-font-path}/fa-brands-400.woff") format("woff"), url("@{fa-font-path}/fa-brands-400.ttf") format("truetype"), url("@{fa-font-path}/fa-brands-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  src: url("@{fa-font-path}/fa-regular-400.eot");
  src: url("@{fa-font-path}/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("@{fa-font-path}/fa-regular-400.woff2") format("woff2"), url("@{fa-font-path}/fa-regular-400.woff") format("woff"), url("@{fa-font-path}/fa-regular-400.ttf") format("truetype"), url("@{fa-font-path}/fa-regular-400.svg#fontawesome") format("svg"); }

EOF

#Delete the old font links
sed -i '/fa fa-/d;  ' src/views/partials/fontawesome.tpl
#Get new icons into variable
newfontawesome=`grep -o -P '(?<=fa-var-).*(?=:)' public/vendor/fontawesome/less/variables.less`

#Make icon Links
for i in $newfontawesome; do
	echo "Insert $i Into Template"
    echo "<i class=\"fa fa-$i\"></i>" >>/tmp/newfontawesome.txt
done

#Insert icons into template
sed -i '/fa-icons/r /tmp/newfontawesome.txt' src/views/partials/fontawesome.tpl #insert the new font links

#Fix notification bell
grep -rl fa-bell-o | xargs sed -i 's/fa-bell-o/fa-bells/g' 
grep -rl fa-bell-slash-o | xargs sed -i 's/fa-bell-slash-o/fa-bell-slash/g' 
#Fix chats comment
grep -rl fa-comment-o | xargs sed -i 's/fa-comment-o/fa-comments/g' 
#Fix setting gear
grep -rl fa-gear | xargs sed -i 's/fa-gear/fa-cogs/g' 
#Fix clock
grep -rl fa-clock-o | xargs sed -i 's/fa-clock-o/fa-clock/g' 
#Fix group
grep -rl fa-group | xargs sed -i 's/fa-group/fa-users/g' 
#Fix floppy saving button
grep -rl fa-floppy-o | xargs sed -i 's/fa-floppy-o/fa-save/g' 
#Fix Thumbs UP Down
grep -rl fa-thumbs-o | xargs sed -i 's/fa-thumbs-o/fa-thumbs/g' 
#Fix Bookmark
grep -rl fa-heart-o | xargs sed -i 's/fa-heart-o/fa-book-heart/g' 
#Fix ThumbTack
grep -rl fa-thumb-tack | xargs sed -i 's/fa-thumb-tack/fa-thumbtack/g' 
#Fix Fork Topic
grep -rl fa-code-fork | xargs sed -i 's/fa-code-fork/fa-handshake/g' 
#Fix Trash
grep -rl fa-trash-o | xargs sed -i 's/fa-trash-o/fa-trash-alt/g' 
#Fix Rebuild
grep -rl fa-refresh | xargs sed -i 's/fa-refresh/fa-sync/g' 
#Fix Mail Forward
grep -rl fa-mail-forward | xargs sed -i 's/fa-mail-forward/fa-mail/g' 
#Fix Picture in Editor
grep -rl fa-picture-o | xargs sed -i 's/fa-picture-o/fa-image/g' 
#Fix Emoji in Editor
grep -rl fa-smile-o | xargs sed -i 's/fa-smile-o/fa-smile-wink/g'
#Fix Rotate Left Right 
grep -rl fa-rotate-left | xargs sed -i 's/fa-rotate-left/fa-undo/g' 
grep -rl fa-rotate-right | xargs sed -i 's/fa-rotate-right/fa-redo/g' 


./nodebb upgrade
./nodebb restart

#Some icons like fa-clock-o in /recent and fa-group in /group have been renamed and are not compatible with the latest FA5. In order to change them,  inspect the element in your browser, under iconPicker class abd change fa-clock-o or fa-group to fa-500px or something else that you can click on and change it.