Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Zach Perry
Zach Perry
1,303 Points

Putting icons inside of a button ...

I'm fairly new to web development, and I've been trying to put an image inside of a button. My attempts have produced a repeated image or nothing at all. Can someone help me with this problem? Any help is greatly appreciated, thank you for your time

3 Answers

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Hello Zach,

If you've gotten the image in the button, you are almost there. You probably just need to set the CSS property **background-repeat:no-repeat;* for your button class or id. For example:

#mybutton {
    background-image:url("path/to/my/image.jpg");
    background-repeat:no-repeat;
}

I hope this helps.

-Agapito

Zach Perry
Zach Perry
1,303 Points

That actually did help a lot. Is there still a way to add CSS to the image itself in the button, such as padding? Thanks for your help

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Zach,

I'm not sure I understand, but if you are asking about adding padding around the image in the button, then the padding property should work to add separation between the image and the button edges. Just add it to the button CSS properties.

-Agapito

Cauli Tomaz
Cauli Tomaz
12,362 Points
Cauli Tomaz
Cauli Tomaz
12,362 Points

For more control over the icon, I usually use the ::before or ::after pseudo-elements. It creates an independent element just before or after your original selector, allowing more flexibility as you need it.

You can see an example in this advanced css video about Flexbox, using icon fonts. 

.button {
    /* Styling for your button without the icon */
}

.button::before{
   position:absolute;
   top: 10px;
   left: 5px;
   background: url(/**/) no-repeat center center;
   width: 32px;
   height: 32px;
}