Skip to content
Sudonix

Unable to change icon in NodeBB navigation

Tips
1 1 692 1
  • phenomlabundefined

    I got hit with this today. As I have a Pro subscription to Font Awesome, this allows me to use a much wider range of fonts. Unfortunately, NodeBB only seems to list the free fonts, so in order to use the Pro icons, you have to manually type the font name you want (leave the fa- part off, as it’s not needed).

    No issues, so I went ahead and typed in the name. Below is the result

    9afecc8c-6a32-4e5d-882c-f72df65db513-image.png

    Now, despite the icon not showing here, it does once you save and reload the site. Great - problem solved then?

    Yes - until you want to change the icon back…

    Highlight over an unchanged icon, and you’ll see the mouse pointer change meaning there is a link behind it

    51d117f6-8359-4136-8f04-9be892a589f7-image.png

    However, hover over one you’ve changed by typing in the value manually, and you’ll see the link is gone

    2e69e0bf-baa0-4dc3-b653-2e14d55fdf5d-image.png

    Panic stations… headless chicken… major cussing session… No - there is a way out

    Fire up the dev tools (F12 for console), and press the select tool. Now select the element with the missing link

    b1a30da5-d878-4fab-9083-c9dcb3affa4a-image.png

    In the resultant element list, follow the HTML until you reach

    2eedea09-2675-4fe0-a28d-a89ff29dc4f3-image.png

    change-icon-link hidden

    Now delete the hidden part, so you are left with just change-icon-link and press enter

    You’ll see that the alt text appears for the image, which is enough for you to be able to click the anchor, and change the icon

    c59af52d-9d23-4f00-839e-0d43eee4c6e1-image.png

    4005c5bb-27a3-41a9-8c19-436e9d1501ab-image.png

    There you go. Now enjoy how smug you feel that you’ve sorted this problem yourself 🙂

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    1
  • phenomlabundefined phenomlab marked this topic as a regular topic on
Log in to reply

Related Topics
  • ahmedundefined

    nodebb error logs

    Bugs nodebb
    6
    2
    4 Votes
    6 Posts
    2k Views
    ahmedundefined
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • Teemberlandundefined

    NodeBB Theme/Skin Switcher

    Solved Customisation nodebb
    38
    7 Votes
    38 Posts
    10k Views
    phenomlabundefined
    @Teemberland great spot ! You should create a PR for that so they can include it in the official repository. Just be aware that any subsequent releases will overwrite your fix without the PR.
  • crazycellsundefined

    what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    4k Views
    phenomlabundefined
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 1653494282106-3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • DownPWundefined

    NodeBB 1.19.3

    Solved Performance nodebb 1.19.3 performance
    33
    4 Votes
    33 Posts
    11k Views
    DownPWundefined
    @phenomlab I find the problem Mark The error message indicated this path : http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u I change the path url on config.json [image: 1645128773854-47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png] And all it’s good Weird, I didn’t have to change that path before 1.19.3 But this does not prevent the problem from a clean install with Emoji Plugin EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup For resume: NodeJS 16_x with 1.18.x is ok
  • DownPWundefined

    [NODEBB] Wallpapers BUG on Firefox Mobile ?

    Solved Customisation nodebb wallpaper firefox mobile
    9
    1
    0 Votes
    9 Posts
    2k Views
    phenomlabundefined
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)
  • JACundefined

    Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    2k Views
    JACundefined
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • Hariundefined

    unable to upvote on forum

    Solved Performance
    10
    1
    3 Votes
    10 Posts
    2k Views
    Hariundefined
    @phenomlab yes, i can understand. it is working now
  • JACundefined

    WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    2k Views
    phenomlabundefined
    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.