This is a beginner project sample for understanding the concepts of HTML and CSS. This may seem very boring to those who are in their intermediate or advanced learning journey of web development, but, for a coding newbie, it may be very challenging idea to make social media buttons and the code syntaxes involved in the same. I too used to look for explanations on this topic , when I was a code newbie and so, I decided to write this project as a mini story to include all the code syntax details , while keeping absolute code beginners in my mind. To the rest of all you experts out there, I’m sorry, if I’m boring you to death over this simple concept(simple for you but complex for newbies)!
Following is the explanation for the HTML code snippet for the social media icons :
We will be using the anchor tag denoted by <a>
The <a> tag is for making a hyperlink, the purpose of which is to link from one page to another.
Let’s consider the attribute of the <a> element, namely, the href attribute, that shows the destination of the link. In this case we have only mentioned the hashtag inside the hyperlink ,for the purpose of indicating that it’s meant for being a placeholder only and hence it will not link to any page unless we mention the actual url link there inside the href attribute, as we are showing this code for example sake. You may explore by inserting any actual social media url links within the various placeholders as shown below. We have provided class attribute to the anchor tags and each of the social media , for instance, facebook anchor tag has been provided a class of “ fa fa-facebook”, this fa class is taken from the standard web font library of font awesome font icons tools. Remember to add the font awesome cdn to your css code in order to generate the connection to this library or else you will not be able to generate the icons in the result. This is achieved by writing the following url link:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
The above link is to be written within the <head> section of the CSS setting tab, if you are using code pen as code editor . Just go to the CSS settings of CodePen, then, you will find the head section with searchable blank space and if you insert above code there, CodePen CSS library setting will connect your CSS to the font awesome library automatically.
If you are using JSitor as your code editor, just as I have used for this mini project, then, no need to insert above font awesome CDN link at all. Just look for library under settings, and under library, search for font awesome icon library and click save. That’s all, boom, and you are connected automatically to the CSS font awesome library.
You can set the color of all icons by using the color property and set different colors to the icons within the html code.
!DOCTYPE html>
<html>
<body>
<a href="#" class="fa fa-facebook" style="color: royalblue"></a>
<a href="#" class="fa fa-instagram" style="color: purple"></a>
<a href="#" class="fa fa-twitter" style="color: skyblue"></a>
<a href="#" class="fa fa-whatsapp" style="color: seagreen"></a>
<a href="#" class="fa fa-telegram" style="color: dodgerblue"></a>
<a href="#" class="fa fa-youtube" style="color: red"></a>
<a href="#" class="fa fa-pinterest" style="color: red"></a>
</body>
</html>
The CSS code snippet for the social media icons for styling the icons and manage their positions on the page:
The CSS code is very simple here. First, use the CSS universal selector, asterisk, to clear the existing margin and padding if any , in order to resolve any page layout problems.
Set the padding, width, font-size and color and margin for the fa class and in the display is set to flex with a flex-direction as column in order to get a vertical alignment for the buttons.
*{
margin:0;
padding:0;
}
.fa{
padding:25px;
width:25px;
margin:7px;
text-decoration: none;
font-size:25px;
color: WhiteSmoke;
display: flex;
flex-direction: column;
}
You can watch this tutorial in video format here :
How to Build Social Media Icons in 15 seconds! #shorts #socialmediaicons #socialmediabuttons
socialmedialinks This html css project shows you to build Social media icons very fast with minimum lines of code in…
www.youtube.com
If you enjoyed understanding this mini project , do consider following me for more such tutorials and projects.
Comments
Post a Comment