How to make circular buttons with Font Awesome icons (and hover effect)?

0
votes

I am trying to create buttons like the picture below.

buttons

I am using stacked Font Awesome icons to put the icons on top of a circle and it looks like this:

enter image description here

(Ignore the gray line at the bottom. That's a result of poor screenshotting.)

However, as you can see, the icons are a tiny bit off. Ideally, I want to push them up a bit so they are vertically centered in the circle and either make the circles bigger or the icons smaller to get the nice padding as in the example. I also want to change the color of the circle which I don't know how to do and add hover effects (like change the icon to white).

Here is my code.

.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
}
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="row footer">
  <!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>

    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
  </div>
</div>
3
htmlcsstwitter-bootstrap-3font-awesome
Can you reproduce your problem here? because in above snippet icons are already in middle. – Abhishek Pandey
Hm...you're right. But in the picture that I included, the icons are a bit off on my end. Why is this? – noblerare
Ah, I figured it out. In my code, I was using Font Awesome 4.5.0 but the code snippet edit that was done by Paolo uses 4.7.0. I changed it to that in my code and that fixed my centering issue. Weird. – noblerare

3 Answers

1
votes

For the first problem, you can use CSS line-height

span.fa-stack {
  line-height: 37px;
}

As for the second problem, you can apply font-size to FA icons, like this:

span.fa-stack > i:nth-of-type(2) {
  font-size: 13px; /* Or whatever value looks best */
}

Or if you wanted, you could even use transform: scale(); again:

span.fa-stack > i:nth-of-type(2) {
  transform: scale(0.8); /* Or whatever value looks best */
}

For the :hover effect, you could use transform: scale();, which I belive is the best hover effect, along-side cursor: pointer;:

span.fa-stack:hover {
  transform: scale(1.3); /* Or whatever value looks best */
  cursor: pointer;
}

And for applying color to the circle, it's a simple as this:

span.fa-stack:nth-of-type(1) {
  color: #2D79AF; /* Or whatever color looks best */
}


.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
  display: table;
  align-items: center;
}
span.fa-stack:hover {
  transform: scale(1.3);
  cursor: pointer;
}
span.fa-stack {
  line-height: 36px;
}
span.fa-stack:nth-of-type(1) {
  color: #2D79AF;
}
span.fa-stack > i:nth-of-type(2) {
  font-size: 14px;
}
#copyright {
  padding-top: 6px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row footer">
<!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
  </div>
</div>

The icons are just text anyway.

1
votes

the icons are text, it means you can modify them as you would any character.

Just add something like:

.fa-linkedin, .fa-envelope-o {
  font-size:12px;  
}
.fa-circle {color:red;}

To your css but I would recomend you to add your own class to your icons insteed of overwritting awesome fonts css as in this fiddle

1
votes

To manually adjust the position of the icons you will have to create the black background separately and then position the icons inside it.

Best way to go forward would be using ul li, as follow

<ul class="social_icon">    
     <li>
        <a href="https://www.facebook.com/xxxxxxx" class="facebook">
          <i class="fa fa-facebook"></i>
        </a>
     </li>
     <li>
        <a href="https://twitter.com/xxxxxx" class="twitter">
          <i class="fa fa-twitter"></i>
        </a>
     </li>
     <li>
        <a href="https://in.linkedin.com/xxxxxxxx" class="linkedin">
          <i class="fa fa-linkedin"></i>
        </a>
     </li> 
     <li>
        <a href="mailTo:[email protected]" class="email">
           <i class="fa fa-envelope"></i>
        </a>
     </li> 
</ul>

CSS would go something like this:

.social_icon {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
}

.social_icon li {
    width: 38px;
    height: 38px;
    background: black;
    border-radius: 100%;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
}

.facebook i {
    position: relative;
    top: xx;
}