Example: bootstrap social media icons
Refer link : https://www.programmingquest.com/2020/04/create-social-media-icon-using-html-css.html <html> <head> <title>Social Media Icon Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa { width: 25px; padding: 20px; font-size: 25px; text-align: center; text-decoration: none; margin: 5px 2px; color: white; border-radius: 50%; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; } .fa-twitter { background: #55ACEE; } .fa-google { background: #dd4b39; } .fa-linkedin { background: #007bb5; } .fa-youtube { background: #bb0000; } .fa-instagram { background: #8a3ab9; } .fa-whatsapp { background: #4FCE5D; } .fa-pinterest { background: #cb2027; } .fa-snapchat-ghost { background: #fffc00; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .fa-skype { background: #00aff0; } .fa-github { background: #000000; } .fa-dribbble { background: #ea4c89; } .fa-vimeo { background: #45bbff; } .fa-foursquare { background: #45bbff; } .fa-stumbleupon { background: #eb4924; } .fa-flickr { background: #f40083; } .fa-yahoo { background: #430297; } .fa-reddit { background: #ff5700; } .fa-rss { background: #ff6600; } </style> </head> <body> <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-whatsapp"></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-github"></a> <a href="#" class="fa fa-dribbble"></a> <a href="#" class="fa fa-vimeo"></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> </body> </html>
Comments
Post a Comment