Skip to content

Instantly share code, notes, and snippets.

@paradite

paradite/font-awesome social round icons css.md

Forked from isramv/font-awesome social round icons css.md
Created March 30, 2017 15:22
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.
Download ZIP

Revisions

  1. @isramv isramv created this gist May 10, 2016.
    33 changes: 33 additions & 0 deletions font-awesome social round icons css.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    Credits here: https://github.com/FortAwesome/Font-Awesome/issues/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>
    ```