Move icon next to nav dropdown text

Wappler General
1

Hello everyone,

I am trying to move the icon from the below navbar dropdown so that it is on the same line and as a prefix to the dropdown text.



image



My code is:

<div class="nav-item dropdown d-none d-md-block">
              <img src="/assets/images/Tap icon.png" width="20">
              <a class="nav-link dropdown-toggle text-dark" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Choose section</a>



Any help is much appreciated!

Thanks,

Leo

2

Can you post an image showing where should this image be positioned?

3

Hi Teodor - thanks for your help!

Yes, I am hoping for it to look like the below:

image

4

add a d-inline-block class to this:

<a class="nav-link dropdown-toggle text-dark d-inline-block" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Choose section</a>
1 Like
5

Hi Teodor,

I have added that but the image is still above the text - is there anything else I need to do?

Thanks,

Leo

6

Maybe provide a link to your page, as with the standard dropdown styling it should not be above it, maybe you changed/styled something else, so i need to inspect your page.

7

Yes of course - the link is http://cashflow.reallifemoney.co.uk/

8

Ok you have some flex styling applied, that’s why it doesn’t work.
You can place the <img> tag inside the <a>:

<a class="nav-link dropdown-toggle text-dark d-inline-block" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">
    <img src="/assets/images/Tap icon.png" width="20"> Choose section
</a>

If it was me i’d use a font awesome icon instead of an image :slight_smile:

9

Wonderful stuff, thank you so much!!

Yeah I do try to use the font awesome icons but the images give me far more options, but I use them where I can.

Is there a huge advantage to using them instead or do you just prefer them?

10

Well for a single image like this it doesn’t really matter, but font awesome icons are vector SVGs, that scale and render better, are easier to customize etc. :slight_smile: Here it’s just a personal preference.

1 Like