To incorporate social media icons into an HTML document using internal CSS to display them on a webpage, we need to adhere to the following guidelines. By following these straightforward instructions, we can seamlessly integrate social media icons.
To begin, the initial step is to input the HTML code into a text editor or to open an already existing HTML file in the text editor where we intend to include the social media icons.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the icons of social media
</Title>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
</Body>
</Html>
Step 2: Next, we need to position the cursor within the head tag right after the title tag in the HTML document. After that, we should specify the <style> tag as illustrated in the code snippet below.
Step 3 requires inserting the provided code between the closing and opening tags of <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;
}
Step 4: Once the code provided above has been successfully integrated, the next step involves connecting the CSS file within the <head> element.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 5: Next, the code provided below needs to be incorporated within the <body> tag in an HTML document.
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
Step 6 involves saving the HTML file and executing it in a web browser to view the output.
<!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>
Add the icons of social media
</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;
}
</style>
</Head>
<Body>
Hello User!... <br>
You are at C# Tutorial Site... <br>
Following are the icons of social media
</br>
<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>
The result of the HTML code above can be observed in the screenshot displayed below:
Add Sticky Social Media Icons
To incorporate sticky social media icons into an HTML document using internal CSS and HTML code to display the icons on a webpage, the following steps need to be followed for seamless integration of these elements. By adhering to these straightforward guidelines, the process of adding sticky social media icons can be accomplished effortlessly.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file in the preferred text editor to incorporate social media sticky icons.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the sticky icons of social media
</Title>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
</Body>
</Html>
Step 2: Now, we have to place the cursor just after the <title> tag in the <head> tag of the Html document and then attach the CDN link. So, we have to type the following <link> tag in the <head> tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 3: Next, it is time to create the layout for the fixed media icons through CSS coding. Therefore, we need to insert the provided code block right after the <link> placeholder in the HTML file.
<style>
/* Style the Sticky icons on web page */
.stickyicon-list {
position: fixed;
top: 200px;
transform: translateY(-50%);
}
.stickyicon-list a {
display: block;
text-align: center;
padding: 8px;
transition: all 0.5s ease;
color: white;
font-size: 20px;
}
/* HOver affect on sticky social media icons */
.stickyicon-list a:hover {
color: #000;
width:10px;
}
/* Now we have to design each icon of social media */
.facebook {
background: #3b5998;
color: white;
}
.twitter {
color: white;
background: #00acee;
}
.linkedin {
background: #0e76a8;
color: white;
}
.google {
color: white;
background: #db4a39;
}
.instagram {
background: #3f729b;
color: white;
}
.youtube {
color: white;
background: #c4302b;
}
</style>
Step 4: Next, we need to insert the provided code within the <body> placeholder.
<div class="stickyicon-list">
<a href="#facebook" class="facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#twitter" class="twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#linkedin" class="linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="#google" class="google">
<i class="fa fa-google"></i>
</a>
<a href="#instagram" class="instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#youtube" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</div>
Step 5: Finally, it is necessary to save the HTML file and proceed to launch the file in a web browser.
<!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>
Add the Sticky icons of social media
</Title>
<style>
/* Style the Sticky icons on web page */
.stickyicon-list {
position: fixed;
top: 200px;
transform: translateY(-50%);
}
.stickyicon-list a {
display: block;
text-align: center;
padding: 8px;
transition: all 0.5s ease;
color: white;
font-size: 20px;
}
/* HOver affect on sticky social media icons */
.stickyicon-list a:hover {
color: #000;
width:10px;
}
/* Now we have to design each icon of social media */
.facebook {
background: #3b5998;
color: white;
}
.twitter {
color: white;
background: #00acee;
}
.linkedin {
background: #0e76a8;
color: white;
}
.google {
color: white;
background: #db4a39;
}
.instagram {
background: #3f729b;
color: white;
}
.youtube {
color: white;
background: #c4302b;
}
</style>
</Head>
<Body>
Hello User!... <br>
You are at C# Tutorial Site... <br>
<div class="stickyicon-list">
<a href="#facebook" class="facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#twitter" class="twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#linkedin" class="linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="#google" class="google">
<i class="fa fa-google"></i>
</a>
<a href="#instagram" class="instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#youtube" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</div>
</Body>
</Html>
The illustration below displays the result of fixed social media icons on the interface.