Thursday, March 28, 2024
HomeCSSLearn how to create Social Media Icons utilizing HTML CSS ? -...

Learn how to create Social Media Icons utilizing HTML CSS ? – csshint


At the moment On this article, we’re studying tips on how to Create Social Media icons utilizing HTML And Css.

Word: You may add Social Media icons as photographs( SVG, PNG ) or Font icon like, bootstrap icon, materials icon and Font superior icon. On this article, i’ll present you tips on how to crate social media icon utilizing font superior. let’s began.

Step 1: first we have to add (Font Superior Icons) the next CDN hyperlink insidesection.

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

Step 2: Add HTML:

<!DOCTYPE html>
<html>
<head>
<meta title="viewport" content material="width=device-width, initial-scale=1">
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<physique>

<h2>Social Media Buttons Examples</h2>

<!-- Add font superior icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
      
</physique>
</html> 

Step 3: Add CSS:

<fashion>
.fa {
    padding: 20px;
    text-align: middle;
    text-decoration: none;
    margin: 5px 2px;
    font-size: 30px !vital;
    width: 70px;
}

.fa:hover {
    opacity: 0.7;
}

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

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

.fa-google {
  background: #dd4b39;
  colour: white;
}

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

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

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

.fa-pinterest {
  background: #cb2027;
  colour: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  colour: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  colour: white;
}

.fa-android {
  background: #a4c639;
  colour: white;
}

.fa-dribbble {
  background: #ea4c89;
  colour: white;
}

.fa-vimeo {
  background: #45bbff;
  colour: white;
}

.fa-tumblr {
  background: #2c4762;
  colour: white;
}

.fa-vine {
  background: #00b489;
  colour: white;
}

.fa-foursquare {
  background: #45bbff;
  colour: white;
}

.fa-stumbleupon {
  background: #eb4924;
  colour: white;
}

.fa-flickr {
  background: #f40083;
  colour: white;
}

.fa-yahoo {
  background: #430297;
  colour: white;
}

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

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

.fa-rss {
  background: #ff6600;
  colour: white;
}
</fashion>

Output:


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments