Create Social Media Icon Using Html And Css (Source Code)

Create Social Media Icon Using Html And Css (Source Code)

Social Media Icon Using Html And Css

Hello! A very warm welcome to code with random’s new blog so Today in this blog we are learning how to add Social Media icons using HTML And Css.
In this blog, we are adding social media icons like Facebook, Twitter, Snapchat, and many more.
So. Let’s start the tutorial on this.

HTML And Css CODE For Social Media Icon:-

In HTML we develop only the basic layout of the website.
For inserting the icons of different social-media icons we are using Fontawesome.To use Fontawesome You have to insert its CDN(content delivery Network) .reference.
You can use FontAwesome docs to learn how to use FontAwesome to insert icons.
Search the icon name and then use the class name of that icon and insert it into an anchor tag or icon tag.
So What is Icon tag?

To insert an icon, add the name of the icon class to any inline HTML element.

100+ Front-end Projects for Web developers (Source Code)

The <i> and <span> elements are widely used to add icons.

All the icons in the icon libraries below are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

NOTE:-Besides from FontAwesome You can use several other websites for inserting icons like  Ionicons,  Bootstrap3, Google icons, etc.

For inserting the styling into HTML.

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using a <link> element to link to an external CSS file

The most common way to add CSS is to keep the styles in external CSS files. However, in this tutorial, we will use inline and internal styles, because this is easier to demonstrate and easier for you to try it yourself.

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

Internal CSS

Internal CSS is used to define a style for a single HTML page.

Internal CSS is defined in the <head> section of an HTML page, within a <style> element.

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

In this code, we are using Internal CSS for basic styling like color, size, etc.

We are going to use only some basics of HTML like anchor tag unordered list, list tag, div tag, etc.

Then give the title of the icon.
The third step is to style the icon with background and color as shown in the code.
The fourth step is to add icons href and classes inside the body.
<!Doctype Html>

  <link rel="stylesheet" href="">
  <Title> icons of social media 2020 </Title>
    .fa {
      padding: 20px;
      text-align: center;
      margin: 5px 2px;
      font-size: 30px;
      width: 50px;

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

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

    .fa-pinterest {
      background: #cb2027;
      color: white;

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

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

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

    .fa-google {
      background: #dd4b39;
      color: white;

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

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

    .fa:hover {
      opacity: 0.9;

    ul li {
      list-style: none;

    <li><a href="#" class="fa fa-facebook"> </a> </li>
    <li> <a href="#" class="fa fa-twitter"> </a> </li>
    <li><a href="#" class="fa fa-pinterest"> </a> </li>
    <li> <a href="#" class="fa fa-linkedin"> </a> </li>
    <li> <a href="#" class="fa fa-instagram"> </a> </li>
    <li> <a href="#" class="fa fa-youtube"> </a> </li>
    <li><a href="#" class="fa fa-google"> </a> </li>
    <li> <a href="#" class="fa fa-snapchat-ghost"> </a> </li>
    <li> <a href="#" class="fa fa-skype"> </a></li>



Html And Css Output Social Media Icon:-

As shown in the output you can see how the icon is added to the list with their description.
If you like it or have any doubts comment in the comment section.
Thank you……
Share on:

Leave a Comment