Home » The HTML Code for Aligning Social Media Icons

Social-media-icon-format

The HTML Code for Aligning Social Media Icons

Hello Beauties,
This post is not about fashion, but I believe that this post will become quite useful.  I’m a relatively new blogger and I am constantly trying to reformat my blog, so that it looks presentable and up to my standards.  I like to set goals for myself and it feels good to achieve them.  From reformatting my blog, I had to start looking at html code.  And this is really a completely different language.  Don’t let the familiar letters of the alphabet fool you!  Well, I had a really hard time getting all the social media icons to line up properly.  So, I’m here to share a little cheat code with you guys.  I could not find this anywhere on the internet.  I sat in front of my computer with a million tabs open on my browser, trying to figure the HTML coding out for aligning social media icons.  And there was a not single website that just typed it all out, so here it is.

Here’s to making your life easier.


All you have to do is insert your website, the link of the social media icon (written in .png or .jpg), and the width and height of the icon.  These places are indicated in bold.  Then you’re done!  Congratulations, you have a beautiful set of aligned social media icons!

The code:

Some tips with the code:

  • This code is for multiple social media site
  • Wherever it says social media site, type in a different one
  • Be careful and always match the right social media site to the icon
  • Double check by filling in the code then clicking on each icon to make sure it directs you to the right site
  • Height and width should be the same number if you don’t want the icon to stretch
I hope this code is of some help to you!  I know it took me a while to figure it out.  Leave some comments below if you have questions.  I am, by no means a professional, and I may not even know what I’m talking about.  But I’m just here to share some things that I have learned.And I’m very sorry that you can’t just copy and paste the code.  I had to post the code as a picture or the Blogger HTML editor kept fixing the code.  I know it’s quite a lot of typing, but I hope you guys still find it helpful!

I hope you guys have a wonderful day and I’ll talk to you guys soon!
Follow on Bloglovin

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *