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?
Cant say if we dont see your actual code
You can also check out
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
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…
<button class = "btn"img src = "https://forum.freecodecamp.org/t/how-to-add-icon-to-button-next-to-button-text/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.
1 Like
Yes, sorry, I actually knew that, I must have accidentally deleted something when editing tags. Thanks for your response though.
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.
1 Like