paradite/font-awesome social round icons css.md

Forked from isramv/font-awesome social round icons css.md

Created March 30, 2017 15:22

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/paradite/dcee3e3feec2b7447fd57bbf8b12a7f9.js"></script>
Save paradite/dcee3e3feec2b7447fd57bbf8b12a7f9 to your computer and use it in GitHub Desktop.

Download ZIP

FontAwesome round social icons

Raw

font-awesome social round icons css.md

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>