Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save paradite/dcee3e3feec2b7447fd57bbf8b12a7f9 to your computer and use it in GitHub Desktop.
Save paradite/dcee3e3feec2b7447fd57bbf8b12a7f9 to your computer and use it in GitHub Desktop.
FontAwesome round social icons

Credits here: FortAwesome/Font-Awesome#4167

I agree. Use Pure css, with border-radius and a fixed width and height.

For example:

.social [class*="fa fa-"] {
    background-color: #333;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: auto 3px;
    width: 30px;
    font-size: 15px;
    text-align: center;
}

to make it colorize when hovered, for example the twitter icon:

.fa-twitter:hover { 
    background-color: #46c0fb; 
}

You're HTML should look like...

<div class="social">
  <a class="fa fa-twitter" title="" target="_blank" href="#"></a>
  <a class="fa fa-facebook" title="" target="_blank" href="#"></a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment