• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.1 Latest
Buy Hosting

Font Awesome Update

Scheduled Pinned Locked Moved General Discussion
fontupdateawesome
5 Posts 4 Posters 2.3k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • HuggyH Offline
    HuggyH Offline
    Huggy
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    1
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    wrote on last edited by
    #2

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

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

    1 Reply Last reply
    1
  • NodeMonsterN Offline
    NodeMonsterN Offline
    NodeMonster GNU/Linux
    wrote on last edited by
    #3

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

    1 Reply Last reply
    0
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    wrote on last edited by PitaJ
    #4

    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.

    1 Reply Last reply
    0
  • NodeMonsterN Offline
    NodeMonsterN Offline
    NodeMonster GNU/Linux
    wrote on last edited by NodeMonster
    #5

    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.
    
    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development