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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Posted by Luke Bennett
Luke Bennett
10,265 Points

I tried adding my own icon but the size was wrong so changed the background size, but now the alinment is wrong. Help!

I changed the background size to 15px 15px, the size is now right, but the icon is sitting slightly to the left of the other icons and is now out of aligment slightly. I tried changing the margin and padding but it isn't doing anything. Does anyone know how to move icons slightly over?

I have images to show what is happening but don't know how to include in this forum.

Thanks,

Luke

Evan Agee
Evan Agee
13,088 Points
Evan Agee
Evan Agee
13,088 Points

Could you post a screenshot of what you're seeing? If you're not sure how to post a screenshot you'll want to download CloudApp (https://www.getcloudapp.com/)

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Just as a general good practice for icons, it's handy to create an icon CSS class that includes standard sizing, padding and margin attributes, so you can place them where you need them and know they will behave consistently. This presumes you're using a set of icons that are identically sized. Trying to mix-and-match icons found in different places, etc. can be frustrating.

You might also want to review the rules for the background property, specifically background-size. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

2 Answers

Sam Donald
Sam Donald
36,305 Points
Sam Donald
Sam Donald
36,305 Points

I'm thinking you need to take a look at the background-position property.

Luke Bennett
Luke Bennett
10,265 Points

Thank you Sam, I played around with this and have figure it out! Woohoo!

Luke Bennett
Luke Bennett
10,265 Points
Luke Bennett
Luke Bennett
10,265 Points

Thanks everyone for the messages! Done it!