Skip to content

Unable to change icon in NodeBB navigation

Tips
1 1 857 1
  • 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
  • 4 Votes
    7 Posts
    3k Views
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    19k Views
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 1718028529465-3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    2k Views
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • Gettin Erors NodeBB

    Solved Configure nodebb eror
    7
    0 Votes
    7 Posts
    2k Views
    @phenomlab no forum is working goods. there is no eror message since yestarday.
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    2k Views
    @DownPW great! thanks a lot… this code solves my problem.
  • 0 Votes
    9 Posts
    3k Views
    @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 ?)
  • RSS parser script [NodeBB]

    Customisation nodebb rss script
    47
    9 Votes
    47 Posts
    22k Views
    @phenomlab said in RSS parser script [NodeBB]: @jac Not yet. Sorry. Have some other work commitments I need to prioritise. Hoping to get to this over the weekend. No worries at all mate, thanks