HTML And CSS Code On Social Media Icons For Developers
All PostsHTML & CSSProgrammingSource CodeWeb Development

HTML And CSS Code On Social Media Icons For Developers

Posted on by Chetan Shidling

Hello guys, welcome back to my blog. In this article, I will share HTML and CSS code on social media icons for developers, CSS code on social media icons, HTML code on social media icons.

If you have any doubts related to electrical, electronics, and computer science, then ask questions. You can also catch me on Instagram – Chetan Shidling. 

Also, read:

HTML And CSS Code On Social Media Icons

HTML and CSS are used by front-end web developers. By using HTML, CSS, and JavaScript we can design web pages. In sort HTML is used to add text, images, tables, lists, etc in the web page, CSS is used to add colors to a web page.

HTML

  1. HTML stands for Hyper Text Markup Language.
  2. HTML is a rendering Language.
  3. It is used to create web pages.
  4. We can’t create a webpage in any language without HTML.
  5. HTML is not a programming language but a rendering language.
  6. It consist of markup tags.
  7. HTML completely depends on its tags and attributes.
  8. It has a lot of tags and each tag can perform different actions.
  9. HTML is a loose language. But we should be strict when tagging.

CSS

  1. CSS stands for Cascade Style Sheet.
  2. CSS is very easy to understand.
  3. By CSS, we can stylize our webpage with colors, styles, and themes.
  4. CSS can be used in three ways: Inline CSS, Internal CSS, and External CSS.
  5. We have to call CSS by ids and classes.
  6. CSS have multiple selection techniques.

HTML & CSS_Code On Social Media Icons

HTML And CSS Code On Social Media Icons 
<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- By CS Electrical And Electronics -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Social Media</title>
    <!-- Font Awesome 5 CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
    <!-- Social Buttons CSS -->
    <link rel="stylesheet" href="css/style.css">
	<!-- Demo CSS -->
	<link rel="stylesheet" href="css/demo.css">
  </head>
  <body>
 <main>
<a href="#">
<div class="fb-icon-bg"></div>
    <div class="fb-bg"></div></a>
  <a href="#">
  <div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
  <a href="#">
  <div class="g-icon-bg"></div>
    <div class="g-bg"></div>
  </a>
<a href="linkedin-url">
  <div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
  </a>
<a href="instagram-url">
  <div class="ins-icon-bg"></div>
    <div class="ins-bg"></div>
  </a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
	background: #354f88;
	height: 37px;
	margin: 0 0 -37px 0;
	width: 41px; 
}

.fb-icon-bg:after {
 content: "\f09a"; font-family: FontAwesome;
  display: block;
  padding: 9px 10px 5px 15px;
color:#fff;
}

.fb-bg {
	background: #3b5998;
	display: block;
	height: 37px;
	margin: 0 0 10px 41px;
}

.fb-bg:after {
	color: #fff;
	content: "Facebook";
	height: 37px;
	left: 8%;
	position: relative;
	
	top: 22%;
	width: 41px; 
}

.fb-bg:hover{
  cursor: pointer;
}

.fb-bg:active{
  background: #354f88;
}

/* Twitter */
.twi-icon-bg:after {
 content: "\f099"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 11px;
color:#fff;
}

.twi-icon-bg {
	background: #40a2d1;
	height: 37px;
	margin: 0 0 -37px 0;
	width: 41px; 
}

.twi-bg {
	background: #45b0e3;
	height: 37px;
	margin: 0 0 10px 41px;
}
 
.twi-bg:after {
	color: #fff;
	content: "Twitter";
	height: 37px;
  left: 11%;
	position: relative;

	top: 22%;
  width: 41px; 
}

.twi-bg:hover {
  cursor: pointer;
}

.twi-bg:active {
  background: #40a2d1;
}

/* Google+ */
.g-icon-bg:after {
 content: "\f0d5"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 13px;
color:#fff;
}

.g-icon-bg {
	background: #ce3e26;
	height: 37px;
	margin: 0 0 -37px 0;
	width: 41px; 
}
 
.g-bg {
	background: #de4c34;
	height: 37px;
	    margin: 0 0 10px 41px;
}
 
.g-bg:after {
	color: #fff;
	content: "Google+";
	height: 37px;
	left: 10%;
	position: relative;
	
	top: 22%;
	width: 41px; 
}

.g-bg:hover {
  cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 0 10px 41px;
}
.lin-bg:after {
    color: #fff;
    content: "Follow up on Linkedin";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-left: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "Follow us on Instagram";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
</style>
 </main>
  </body>
</html>

I hope this article may help you all a lot. Thank you for reading. Follow us on social media for more information related to electrical, electronics, programming, technology.

Also, read:

About The Author

Chetan Shidling

Automotive | Technical Blogger | Engineer | Content Creator

See author's posts

Share Now