Font Awesome Update



  • 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


  • Staff Admin

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

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


  • GNU/Linux

    @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?


  • Global Moderator

    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.


  • GNU/Linux

    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.
    

Log in to reply
 

Suggested Topics

  • 6
  • 13
  • 4
  • 3
| |