ADVERTISEMENT

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

Telegram Group Join Now

ADVERTISEMENT

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

 

ADVERTISEMENT

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.

ADVERTISEMENT

In this blog, we are adding social media icons like Facebook, Twitter, Snapchat, and many more.
 

Social Media Icon Using Html And Css

 
Code by N/A
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies Yes
Responsive Yes
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.

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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>

Html And Css Output Social Media Icon:-

ADVERTISEMENT

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.

ADVERTISEMENT

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

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT