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 Carman A
Carman A
7,672 Points

Styling Font Awesome Icons

Ok so I'm working on a website, and have 1 Font Awesome Icon. I wanna change the icon, and background to a different color. The problem I am having is the icon, is smaller than the background, and (the background) leaks out. I've tried different heights, and widths, I've also tried display: inline-block because that has worked for some people. Right now I have a border-radius of 50%.

So anyways here's the link on codepen. I'm pretty sure this is a simple fix and I'm blanking on something.

Jeremy Stenseth
Jeremy Stenseth
16,916 Points
Jeremy Stenseth
Jeremy Stenseth
16,916 Points

The width of the your icon container is 27px and the height is 32px so adding a border radius will of 50% will not give you a circle but an oval. I am looking forward to messing with this more when I get home from work.

3 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

I don't see the code on codepen. Can you place a new one?

Carman A
Carman A
7,672 Points

Details > editor

Adam Bennett
Adam Bennett
7,663 Points
Adam Bennett
Adam Bennett
7,663 Points

So you want the background and icon to be the same size so you basically won't see the background? If so why not just get rid of the background styling? If the IMG is the only thing there then the containing box should fit to the IMG. Unless I'm just completely not understanding, the codepen link wasn't really clear as to what is going on. Do you have code that you could show to better explain?

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Okay so the circle part is the color, the actual arrow is the background color. I want (on hover ) the arrow to be white with a white border around the circle right now no matter the border radius it's an oval. I know the color isn't what i want currently on codepen.

Jeremy Stenseth
Jeremy Stenseth
16,916 Points
Jeremy Stenseth
Jeremy Stenseth
16,916 Points

I changed the padding of i. Removed the border radius and changed the background color (on hover) to white. The white border you see is actually the background. It's a hack for sure but it works and I am still learning.

i {  
   margin: 80px 0 0 85%;  
   border-radius: 50%;  
   transition-duration: .7s;  
   padding: 1px 3px 0 2px;  
}  
.buy-now:hover i {  
   color: #0CA467;  
   background-color: white;   
}
Carman A
Carman A
7,672 Points

Thank you :) That's actually a pretty good idea.