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
Charlie Bradley
17,935 PointsHow do I shrink my icon to fit beside my h1 headline?
What I've used so far...
title::before {
content: url(link);
}
I'm having success adding the image but it is sitting on top of the headline element instead of to the left and applying width and height don't seem to make any difference. Thanks for the help!
4 Answers
Mari Johannessen
12,232 Pointstitle:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
Sorry about how the code turned out in the first post!
Demian Martinez
2,985 PointsImg elements are block elements by default so they take up the whole line of space. What you are trying to do is make the image display inline with the text. To do that you have to make the image display as in inline block by using the display property. This will make sure that your image doesn't have to take up the whole line and can have other elements next to it.
img {
display: inline-block;
}
Mari Johannessen
12,232 PointsI would try this:
title:before { content: ""; display: block; background: url("icon.jpg") no-repeat; width: 20px; height: 20px; float: left; margin: 0 6px 0 0; }
And change the sizes and the URL to whatever you have of course :)
Joshua Gassett
6,741 PointsIf you want to include an image/icon next to your h1 headline, you should move the image code INSIDE the h1 tag. example
<h1><img src="webaddress.com/image"> This is my title. </h1>