Is it possible to show leading icons in the menu (nav bar stack)?
Similar to the badge function in the header plus stack settings…?
You can use Font Awesome icons.
Instead of naming your Home page as ‘Home’ in the Pages list for example, you can use this code
<i class="fa fa-home"></i> Home
Just use the Nav bar as normal.
Don’t know if it’s a supported feature though.
2 Likes
This is a standard RW feature or rather a way of adding FA4 symbols to a page, so will work fine. The code to enter is just the FA code followed by a space and the text, so this will work better (the non breaking space is not needed because 1 space character will work):
<i class="fa fa-home"></i> Home
Replace the home text above, with the text for whatever one of the 470 FA4 symbols you want to use. Here is an easy to understand page that shows the correct text for each icon:
https://fontawesome.bootstrapcheatsheets.com.
@papart Unfortunately this doesn’t have the full position and size controls that are included in the amazing badge feature of BWD Header Pro, but it s still a usable solution.
thank you @Rob and @webdeersign for your comments.
But I was looking for a way to use my own CUSTOM SVG icons (not font awesome icons) in the menu.
Meanwhile I figured out that it´s possible to insert something like:
<img src="URL/example.png"></img> prior the text – and it does work. 
unfortunately it doesn´t seem to work with svg files though 
the png´s work, but they look blurry compared to SVG.
does anyone know a way to link to SVG´s in a similar way? that would be awesome!
And by the way: why is it I can link to PNGs but not to SVG´s - from a technical point of view…??
It should work with SVG’s. Perhaps your SVG’s are not well formed. You probably want to use an App like Graphic to export the SVGs at the size you want and this will be preserved when they display.
All image stacks that support warehousing can use SVGs just like pngs and jpgs.
2 Likes
The IMG tag is self closing, so there is not an end img tag. Leave out the </img> part. It may cause issues depending on how well the browser parses the code.
God bless you - thank you so much! there was a checkbox in affinity designer during svg export which needed to be unchecked. Now svg is working!
Just to clarify: I am using the foundry Nav bar stack and inserted the bit of code as part of the page name - not a dedicated svg stack involved here.
1 Like
Great. I only mentioned the image stacks with warehouse capability, because those who are not familiar with them, may not be aware that SVG’s can be used just like any other image, in those type of image stacks.
1 Like