Menu icon Foundation
Image in Button?

I am able to successfully use the button class to create a button that works in Outlook (client). I would like to be able to add a small image logo to the left side of the text in the button but can't seem to figure it out.

Is there a way to add a small image to the left side of the text in a button?

button with image issue

button image email

I am able to successfully use the button class to create a button that works in Outlook (client). I would like to be able to add a small image logo to the left side of the text in the button but can't seem to figure it out.

Is there a way to add a small image to the left side of the text in a button?

button with image issue

Rafi Benkual over 3 years ago

This is a tough one to get right with tables.

Tried:

<button href="#" class="success"><img src="http://placehold.it/25/663399" alt="">Get smarter now &rarrtl;</button>

This works but the image is stack on top of the text.

So this CSS made them side by side:

  .button img {
    display: inline-block;
    padding-right: 5px;
  }

But the text is still not lined up. 

Might try some of the valign properties next.

What did you try?

Ashwin about 1 year ago

How could you know different features of Windows 10 OS?You need this tutorial  help microsoft windows 10 and make your desktop awesome in use.This is the only place where no charges requires for getting valuable education.