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

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,087 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
Pro Student 12,420 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,301 Points

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

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

Thanks everyone for the messages! Done it!