CODEWITHSUNDEEP
javascripthtmlcss
Tarik Kdiry
Tarik Kdiry

Reputation: 57

Font-awesome Social Media buttons hover effects

Some sites have the effect on their social media buttons where once a user hovers over it, the button would change to the color of the original logo. For example, my facebook button is currently black and white but when a user hovers over it, I would like it to transition to the original facebook blue and white.

Related parts of the HTML

<div class="socialmedia">
            <a href="mailto:[email protected]" title="Email">
                <i class="fa fa-envelope-o"></i>
            </a>
            <a href="https://www.facebook.com/Tarik.Kdiry" target="_blank" title="Facebook">
                <i class="fa fa-facebook"></i>
            <a href="https://twitter.com/GalacticWizrdry" target="_blank" title="Twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.instagram.com/tarik_kdiry/" target="_blank" title="Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
            <a href="https://www.linkedin.com/in/tarik-kdiry-0b62b8100" target="_blank" title="LinkedIn">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://github.com/tarikkdiry" target="_blank" title="Github">
                <i class="fa fa-github"></i>
            <a href="https://www.pinterest.com/tarikkdiry/" target="_blank" title="Pinterest">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>

CSS

body {
  margin: 0;
  text-align: center;
  color: #f7f7f7;
  background: url(citybackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 10%;
  margin-bottom: 10%;
}

.referral {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight:20;
  margin-top: 5px;
}

h1 {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 100px;
}

h2, h3 {
    color: white;
    font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
}

head {
  text-align: center;
  color: white;
}

.me {
    height: 1000px;
    width: 1000px;
    border-radius: 100%;
    align: center;
    position: relative;
    top: 35px;
    right: 18px;
}

.me:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.info {
    font-size: 30px;
    display: inline;
    margin-top: 30px;
    margin: 0 auto;
}


.info a {
    background-color: #f7f7f7;
    border-radius: 15px;
    margin: 6px 6px;
    width: 10px;
    height: 10px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.info a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}
.socialmedia {
    display: inline;
    margin-top: 30px;
}


.socialmedia a {
    background-color: #f7f7f7;
    border-radius: 35px;
    margin: 6px 6px;
    width: 36px;
    height: 36px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.socialmedia a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}

.socialmedia a .fa {
    font-size: 2.2em;
}

@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

Upvotes: 0

Views: 2718

Answers (3)

Elron
Elron

Reputation: 1455

Here's my SCSS file called "_fontawesome-social-colors.scss", I import in my websites:

/*
 * CSS Snipped for display logo color brand on HOVER for font awesome social media icons
 * List is obviously incomplete
 *
*/
a {
  &:hover, &:focus {
    > i {
      &.fa-facebook-square,
      &.fa-facebook {
        color: #3b5998;
      }
      &.fab.fa-facebook-messenger {
        color: #0084ff;
      }
      &.fa-youtube {
        color: #ff0000;
      }
      &.fa-twitter {
        color: #4099ff;
      }
      &.fa-envelope-o,
      &.fas.fa-envelope {
        color: red;
      }
      &.fa-twitter {
        color: #55acee;
      }
      &.fa-instagram {
        color: #5851db;
      }
      &.fa-linkedin {
        color: #0077b5;
      }
      &.fa-github {
        color: #333333;
      }
      &.fa-pinterest {
        color: #bd081c;
      }
      &.fa-whatsapp {
        color: #25d366;
      }
    }
  }
}

Change it to your liking

Upvotes: 0

frnt
frnt

Reputation: 8795

This is what you need to add to change social networking icons original color on hover

.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
 }
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}


body {
  margin: 0;
  text-align: center;
  color: #f7f7f7;
  background: url(citybackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 10%;
  margin-bottom: 10%;
}

.referral {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight:20;
  margin-top: 5px;
}

h1 {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 100px;
}

h2, h3 {
    color: white;
    font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
}

head {
  text-align: center;
  color: white;
}

.me {
    height: 1000px;
    width: 1000px;
    border-radius: 100%;
    align: center;
    position: relative;
    top: 35px;
    right: 18px;
}

.me:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.info {
    font-size: 30px;
    display: inline;
    margin-top: 30px;
    margin: 0 auto;
}


.info a {
    background-color: #f7f7f7;
    border-radius: 15px;
    margin: 6px 6px;
    width: 10px;
    height: 10px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.info a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}
.socialmedia {
    display: inline;
    margin-top: 30px;
}


.socialmedia a {
    background-color: #f7f7f7;
    border-radius: 35px;
    margin: 6px 6px;
    width: 36px;
    height: 36px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.socialmedia a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
}

.socialmedia a .fa {
    font-size: 2.2em;
}

.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
}
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}


@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<div class="socialmedia">
            <a href="mailto:[email protected]" title="Email">
                <i class="fa fa-envelope-o"></i>
            </a>
            <a href="https://www.facebook.com/Tarik.Kdiry" target="_blank" title="Facebook">
                <i class="fa fa-facebook"></i>
            <a href="https://twitter.com/GalacticWizrdry" target="_blank" title="Twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.instagram.com/tarik_kdiry/" target="_blank" title="Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
            <a href="https://www.linkedin.com/in/tarik-kdiry-0b62b8100" target="_blank" title="LinkedIn">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://github.com/tarikkdiry" target="_blank" title="Github">
                <i class="fa fa-github"></i>
            <a href="https://www.pinterest.com/tarikkdiry/" target="_blank" title="Pinterest">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>

Upvotes: 0

Toby
Toby

Reputation: 13385

In your CSS block for .socialmedia a .fa you're changing the font size of the FontAwesome icon - this is where you might add code to change the color also:

.socialmedia a .fa {
  font-size: 2.2em;
  color: #222;
}

.socialmedia a:hover .fa-facebook {
  color: #4267B2;
}

Upvotes: 0

Related Questions