How to add icon to button (next to button text)

[coderostro]

Hi all,

I know this is probably very basic, but for some reason, I can’t find the answer I am looking for.

If I have a button such with the following code:

<button>Add to Cart</button>

and I want to add an icon image next to the text, how should I code this? If I add an img attribute to the button element, it doesn’t appear… - do I need to wrap the text and img in a separate wrapper or something?

[Cody_Biggs]

Cant say if we dont see your actual code

You can also check out

Font Awesome

It has a free plan, just follow the getting started guide then you can view and use hundreds of icons. It will show you how you need to add them to your html. I would suggest this over anything you’re trying to do with the img

You also can not add a image “attribute” to a button because its a button and has no such attribute.

Edit: Or, another idea is you could use emojis, and add some css to make it look good, but the html would be something like

<button class="icon-button"><i class="icon">🚀</i>Launch</button>

I still say font awesome is the better approach

[coderostro]

thanks

I want to use the svg I have in the images folder…

The code I currently have doesn’t work, I am just not sure how it actually should be…

[bbsmooth]

<button class = "btn"img src = "images/icon-cart.svg">Add to Cart</button>

Is this the button you are talking about? You can’t concatenate the button and img tags like that. You need to close off the opening button tag and start the img tag properly.

Also, add alt="" to the img tag so that screen readers don’t pick up this decorative image.

[coderostro]

Yes, sorry, I actually knew that, I must have accidentally deleted something when editing tags. Thanks for your response though.

[bbsmooth]

Gotcha. It would still help if we could look at your working code. There should be no reason you can’t add an img tag inside the button:

<button><img>Text</button>

This should work just fine.