0

In the footer of my site http://www.stefaanoyen.be (left column) I have some social media icons which are an icon font. On hover, I want the circles red and the icons in it white. The red circles work, but there's a white square behind them. How do I limit the white to the shape of the icons/circles?

This is my HTLM:

<p class="share"><a href="#">l</a> <a href="#">i</a> <a href="#">g</a> <a href="#">f</a></p>

And this is my CSS:

.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}

.share:hover {
cursor: pointer;
}

.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}

Thanks a lot for your help!

Stefaan

Stefaan
  • 184
  • 4
  • 6
  • 16

2 Answers2

1

There is no simple solution for this one because you only rely on a font. You could try to add a border-radius (your font-size is set to 50px so radius of 25px will probably do it but you will have to play around with it) to the .share a:hover element.

SKeurentjes
  • 1,848
  • 12
  • 18
  • Thank you! I implemented this, but it still shows a white edge around the red circle... Tried with `background-size: 25px 25px` but that didn't do anything. Any ideas? – Stefaan Mar 27 '13 at 17:12
  • Maybe you can use a `background-image` (a white circle width the right dimensions) on the `.share a:hover` – SKeurentjes Mar 28 '13 at 10:52
0

The "Shape of the icons/circles" is actually a rectangle. You're setting the white background to the link. The link is a rectangle. You won't be able to directly style the background of a font/character.

Since your icons are all rounded, here's a little trick you could use:

border-radius: 50px;

That's simply a guessed figure. It doesn't mean it's the right one. Just find the one you need that matches your icons height/width. (You might also need to work with your line-height to make sure your font is, or at least looks vertically centered.)

isotrope
  • 1,847
  • 12
  • 10