Font border

Question

I am trying to create a simple enough link for social networks for the page footer using a font, amazing icons with a circular background, please enter the code: http://codepen.io/anon/pen/ojmJYE

 <i class="fa fa-circle fa-stack-2x icon-background1" ></i>

For the rollover effect, I want a “1px black border” around the background circle so that it changes from “solid” to “outline” with the remaining icon - but I can't reference the CSS border property for the circle background?

Answer 1

It is very simple. give borderin hovercondition !!

I gave border-radius: 50%and 1px solid #000 bordericon to get this conclusion

.social-container {
  backgroun: #66ffdc;
  float: right;
  font-size: 1.2em
}
.icon-background1 {
  color: #000
}
.icon-background2 {
  color: #fff;
}
a:hover .icon-background1 {
  color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #000;
}
a:hover .icon-background2 {
  color: #000;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="social-container">
  <a href="" class="fa-stack fa-lg" style="text-decoration:none; margin-top:0">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa  fa-facebook fa-stack-1x  icon-background2"></i>
  </a>
  <a href="" class="fa-stack fa-lg" style="text-decoration:none">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa fa-instagram fa-stack-1x  icon-background2"></i>
  </a>
</div>

Run codeHide result

Answer 2

, .

CSS

a:hover .icon-background1  {
  color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  transform: scale(0.80);
  box-sizing: border-box;
}

Answer 3

.social-container
{   width: 100%;
    margin: 40px 0 50px;
    list-style-type: none;
    text-align: left;
    padding: 0;
    float: left;
    text-align: center;}
.social-container li i
{
    width: 42px;
    height: 42px;
    display: block;
    border: 1px solid #aaa9ad;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    line-height: 42px;
    color: #aaa9ad;
    font-size: 21px;
}

.icon-background1          {color: #000 }
.icon-background2          {color: #fff;}


a:hover .icon-background1  {color: #fff}
a:hover .icon-background2  {color: #000;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul class="social-container">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

Hide result