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

How to Add Social Media Icons in HTML and CSS?

How to Add Social Media Icons in HTML and CSS?

Hello Coder! Today we are going to learn How to Add Social Media Icons in HTML and CSS Code. In this Project, we add Social Media Icons With the help of font-awesome. we add social media icons Like Facebook, Whatsapp, Twitter, LinkedIn, Instagram Etc Using Only Html and Css.
Add Social Media Icons in HTML and CSS

Social Media Icon Using Html And Css

Ā 
Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
Social Media Icon Table
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.

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.

Gym Website Using HTML and CSS With Source Code

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.

Restaurant Website Using HTML and CSS

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>
<Html>

<Head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <Title> icons of social media 2020 </Title>
  <style>
    .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;
    }
  </style>
</Head>

<Body>
  <ul>
    <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>
  </ul>
</Body>

</Html>

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

this is Html and Css Code Together in the file. we use font-awesome icon CDN link for showing social media icon.

Html And Css Code Output Of Social Media Icon:-

As shown in the output you can see how the icon is added to the list with their description.
Ā 
Ā 
Hope you guys understand HOW TO ADD SOCIAL MEDIA ICON USING HTML.
If you like it or have any doubts comment in the comment section.
Ā 
Thank you……

Which code editor do you use for this Social Media Icon coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

yes!

ADVERTISEMENT



Tags: , ,

Leave a Reply