---

How to add Social Media Icons Using HTML

Creating Social Media Icons

If you’re comfortable writing a little code and uploading files to your website or webserver this tutorial should be pretty simple.

1. Choose the social media platforms you want to include on your website.
2. Download icons to your computer. You can use IconFinder to find the icons you would like to use. https://www.iconfinder.com?ref=chris-bolton (50% off is $4.50 a month and you can cancel anytime!)
3. Upload the icons to your webserver (often a public folder of your website).
4. Copy the url path of each image you have uploaded and store them in a plain text file. If you put the icons in an /images/ folder than an example URL would look something like this:

www.yourwebsite.com/images/facebook.png

Once you have uploaded your icons, test them in your browser to make sure they work.

Putting Social Media Icons on Your Website using HTML:

1. Create the code needed to display the icons. If you need a tutorial: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp This involves creating an unordered list element (ul) with list items (li) for each social media platform you want to include. Inside each list item, add an anchor element (a) with an href attribute linking to your social media profiles. Set src to the location of each icon where you uploaded them.
2. Add the code to your website. Social media icons will often live in the header or footer of a website.
3. Define the appearance of your social media icons using CSS. This involves setting the display, width, height, and margin properties of your unordered list and anchor elements, as well as styling your icons using image-specific properties like object-fit and border-radius.
4. Save your CSS file and place it in the same directory as your HTML file, or use an external stylesheet link in your HTML code to link to the CSS file on your server.
5. Test your website to ensure that your social media icons are visible and functional.

That’s generally how to create social media icons and put them on your website via HTML. However, please note that this is just a general outline and you may need to modify the code based on your specific situation and needs. Additionally, accessibility is becoming increasingly important for websites, so it’s important to ensure that your social media icons are labelled properly with alt text that describes the platform being linked to. I recommend that you conduct further research to ensure that your social media icons conform to best practices.