Skip to content

Unable to change icon in NodeBB navigation

Tips
  • 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 🙂

  • phenomlabundefined phenomlab marked this topic as a regular topic on

Related Topics
  • TNG + Nodebb

    General
    4
    0 Votes
    4 Posts
    130 Views

    @Madchatthew said in TNG + Nodebb:

    you have to try and use duck tape and super glue to change something to make it do what you want it to do

    I couldn’t have put that better myself.

  • Upgrade issues

    Solved Configure
    2
    2 Votes
    2 Posts
    199 Views

    Use this code

    git fetch # Grab the latest code from the NodeBB repository git checkout v3.x git reset --hard origin/v3.x

    And you will have the latest version without specifying it

    https://docs.nodebb.org/configuring/upgrade/

  • SEO and Nodebb

    Performance
    2
    2 Votes
    2 Posts
    313 Views

    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example

    https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1

    However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts

    https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365

    And also

    https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164

    It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”.

    Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.

  • Upgrade Problem from 2.8.3 to 2.8.4

    Solved Configure
    35
    8 Votes
    35 Posts
    2k Views

    @cagatay No, you can ignore that.

  • How to downgrade plugin version on NodeBB

    Solved Customisation
    11
    3 Votes
    11 Posts
    851 Views

    @cagatay no problems

  • Link vs Refresh

    Solved Customisation
    20
    8 Votes
    20 Posts
    1k Views

    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related

  • 0 Votes
    5 Posts
    496 Views

    @qwinter this particular site uses the code I wrote if you want to see it in action. It’s a information and intelligence gatherer I designed for collecting various information security articles from around the globe and consolidating them in one place.

    Essentially, each “post” is in fact generated by the script, and the NodeBB API.

    https://hostrisk.com/

  • [NodeBB] Import custom Font

    Solved Customisation
    12
    3 Votes
    12 Posts
    1k Views

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.