Skip to content
Sudonix

Unable to change icon in NodeBB navigation

Tips
1 1 788 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 Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Phenomlab Ltd

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

Related Topics
  • phenomlabundefined

    Planned sunset of NTFY plugin

    Pinned Announcements push nodebb ntfy
    7
    1
    8 Votes
    7 Posts
    3k Views
    phenomlabundefined
    I’ve noticed that I’m the only one subscribed to the push notifications on this site. If you were using NTFY previously, and have noticed that you’ve not had any alerts for a while, it’s because this feature has been disabled. You’ll now need to use the push notification to replace NTFY as mentioned in the first post.
  • cagatayundefined

    Nodebb 3.2.0

    Bugs nodebb nodebb 3.2.0
    20
    1
    2 Votes
    20 Posts
    6k Views
    phenomlabundefined
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • Pandaundefined

    Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 1686833368846-3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: 1686833399483-a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 1686833431032-89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png] Here’s the below CSS you need based on the screenshot provided. .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • cagatayundefined

    NodeBB v3 Chat Very Slow

    Moved Performance nodebb v3 nodebb chat
    47
    11 Votes
    47 Posts
    18k Views
    phenomlabundefined
    @DownPW Seems fine.
  • Pandaundefined

    adding some console.log to Nodebb

    Solved Customisation nodebb
    4
    1 Votes
    4 Posts
    2k Views
    phenomlabundefined
    @eeeee if you’re using the console, you could try node app.js > app.log 2>&1 This would redirect stdout to a file named app.log and redirect stderr to stdout. I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log. Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.
  • DownPWundefined

    nodebb loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    4k Views
    phenomlabundefined
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • cagatayundefined

    How to fix header side as boxed

    Solved Customisation header boxed sudonix nodebb
    10
    1
    6 Votes
    10 Posts
    3k Views
    cagatayundefined
    @phenomlab yes it caused a problem for mobile users. thank you for helping …
  • Madchatthewundefined

    Bootstrap Version

    Solved Customisation nodebb bootstrap
    8
    5 Votes
    8 Posts
    2k Views
    Madchatthewundefined
    @phenomlab That will be nice once they have completed that. It will be interesting to see how long that takes. So for now I will use custom css to make it look the way I want. Frameworks just make things a little faster. Thanks @phenomlab