CODEWITHSUNDEEP
htmlcssicons
emss
emss

Reputation: 65

Social links reference and CSS design

I'm trying to figure out, how to fix the social links design.

GitHub and Spotify size is different, and seems like Blogger icon is not in reference:

enter image description here

According How To Create Social Media Buttons - W3Schools librarie reference:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML specific list, also must be updated with other social network links:

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-soundcloud"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-github"></a>
<a href="#" class="fa fa-spotify"></a>
<a href="#" class="fa fa-blogger"></a>

and CSS:

.fa {
    padding: 7px;
    font-size: 30px;
    width: 30px;
    height: 30px;
    text-align: center !important;
    align-items: center !important;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
  .fa:hover {
      opacity: 0.7;
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }
   
  .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
  .fa-instagram {
    background: #125688;
    color: white;
  }
  
 .fa-soundcloud {
    background: #ff5500;
    color: white;
  }
  
  .fa-reddit {
    background: #ff5700;
    color: white;
  }

  .fa-github {
    background: #ffffff;
    color: rgb(0, 0, 0);
  }

  .fa-spotify {
    background: #ffffff;
    color: #1DB954;
  }

 .fa-blogger {
    background:  #fc4f08;
    color: rgb(255, 255, 255);
 }

edit 1:

Blogger icon appears with 6.2.0 version:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

but for some reason, the same code from @Cervus camelopardalis answer looks different in my browser, and GitHub and Spotify icons are still smaller than other icons as in the answer snippet too:

enter image description here

edit 2:

With the edit in CSS:

.fa-brands {
  padding: 5px;
  padding-left: 1px;
  padding-right: 1px;
  font-size: 20px;
  width: 30px;
  height: 30px;
  text-align: center !important; 
  text-decoration: none;
  border-radius: 50%;
}

but GitHub and Spotify icons are a smaller then others:

enter image description here

and if I use class="fa-brands fa-facebook instead class="fa-brands fa-facebook-f than the Facebook icon is also small like GitHub and Spotify icons:

enter image description here

Upvotes: 0

Views: 96

Answers (1)

Rok Benko
Rok Benko

Reputation: 22910

Font Awesome v4.7.0 doesn't support the Blogger icon.

No support

Use Font Awesome v6.2.0.

See the snippet below.

.fa-brands {
  padding: 7px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: center !important;
  align-items: center !important;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook-f {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-github {
  background: #ffffff;
  color: rgb(0, 0, 0);
}

.fa-spotify {
  background: #ffffff;
  color: #1DB954;
}

.fa-blogger {
  background: #fc4f08;
  color: rgb(255, 255, 255);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a href="#" class="fa-brands fa-facebook-f"></a>
<a href="#" class="fa-brands fa-instagram"></a>
<a href="#" class="fa-brands fa-youtube"></a>
<a href="#" class="fa-brands fa-twitter"></a>
<a href="#" class="fa-brands fa-soundcloud"></a>
<a href="#" class="fa-brands fa-linkedin"></a>
<a href="#" class="fa-brands fa-github"></a>
<a href="#" class="fa-brands fa-spotify"></a>
<a href="#" class="fa-brands fa-blogger"></a>

Upvotes: 1

Related Questions