Web Design Basics – Using Simple Fonts to Add Social Icons

Using Simple Fonts to Add Social Icons

Today, it’s expected that every blog and website has social networks, and links to them on their site. If someone visits your site and is intrigued by your content, usually the first action they take is to look for your social networks so they can stay up to date with your content. Many blogs keep their social network links in a sidebar, in the footer, at the top right corner of the page, or along the left border. Or maybe even in multiple pages. You need to have social links so that it’s easy for people to find you, follow you, and then revisit your site.

So, how do you add social links to your website? There are plugins and add ons that can do this for you, but the problem with those is that there are standard appearances, which probably don’t match your site or brand. So how do you add social links that you can customize? Well, believe it or not, it’s actually really easy.

Using Simple Fonts to Add Social Icons

Today people have created fonts that are made up completely of social icons. All you have to do is embed that font into your site like you would any other, and then type letters just as you would – except they will appear as social icons. There are tonnes of different ones out there, but here is just one example for you to try from Fonts2U. Once you’ve chosen the right font, here are the steps to install it. I’m going to assume at this point you’ve got a child theme going and you have access to your own style file.

Step 1

Obviously, step one is to download the file. Once you’ve got it on your computer you want to upload it to your server. This just means that you need to put it in the same folder that your style.css file is in to keep things simple.

Step 2

Next you need to tell your style.css file to use the font. To do this you just need to put a simple @fontface in your style.css file like so:

Step 3

The easiest thing to do in my opinion is pick a heading that will only be social icons. AKA you’ll only ever use this heading when you want to put social icons in place. So pick which heading you would like to use, and then add some simple styling to your style.css file like so:

You need the display inline block in there because most headings are automatically set to push the next item to the next line, but inline block makes the next item stay on the same line.

Step 4

Last, but not least, use the font in your html wherever you want the social icons to appear like so:

When used properly this will look like this GTF. Of course you’ll have to reference the font page or fiddle around to see what letters will actually display the icons you want, but that’s pretty much it!

Now you can use the heading you set wherever you want, and the letters will always appear as social icons. And of course, you can change the colour and size and other settings just as you would any other font!

Step 4.0

If you’re looking to do a sidebar like mine with each icon being a different colour, it doesn’t make much sense to set different headings and colours for each. Instead, you can use the span tag. Cut out step three, you don’t need to add any styling to your css file. Instead, you’re going to do it all in your html. You want to write it like so:

The it will come out looking like this: G T F. This makes it super easy to put social icons wherever you want, and you just add a simple link to link them to your social profile!

Here are all the different icons available with this font:


How do you use social icons in your site?

1 thought on “Web Design Basics – Using Simple Fonts to Add Social Icons”

  1. I use the social icons that come with the design, which is simple and clean. I used to design my own social icons when I used self-hosted WordPress platform for blogging. It is quite customizable using CSS styling.

Leave a Reply

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