Font Awesome and Social Media
Have you ever wondered how you can use your website to increase your social media presence? Have you ever wondered how some websites get such great looking social media icons (like the ones above) on their website? One answer is a service called Font Awesome, and we will cover it in a minute. But first…
This is the first in a series of blog posts that intend to do a few things. First, I would like to promote awareness into how websites work, because I think that EVERYONE in this [digital] age can benefit from having a more foundational, technical understanding of the internet. Second, if you have been wanting to learn to code for a while and are not sure where to begin, then these blog posts are made just for you. I am not claiming to be NEARLY as good as any of the real players in the computer education game (for instance, I do about 90% of my training on www.pluralsight.com, but people also enjoy www.codeacademy.com, www.udemy.com, and many, many more. Each one has a different approach to teaching, so find the one that fits your learning style the best). All I am trying to do here is provide some supplemental education to help you in your business, your everyday life, and hopefully help you find some enjoyment in a field that many people consider very dry and boring.
That being said, I’d like to share a trick with all of you guys that you can use to add some serious “style points” to your website. With this trick I am about to show, you can take your website’s header, footer and other menu forms from lame to lucrative in practically no time. You do not need a degree in digital marketing or computer science to do this (I don’t have either of those!) – just a computer, internet and about 15 minutes.
Tutorial: Using Font Awesome Social Media Icons
Today, I will be showing you how to use Font Awesome’s online repository to make visually stunning social media link icons that will quickly and easily add visual appeal to your website. If you are an advanced reader, you can probably just click the link and follow the instructions on the website to see what they’re about and how to start using their services. If you’re a beginner, or would like to understand about how your business’ website works on a more technical level, then feel free to follow along with this post! Finally, if at some point you cannot get a part of the tutorial to work for you (it happens a lot no matter what level you are programming at), then please let me know and I will make sure that you can get it to work on your computer.
First, check out these images below to see some of the options that Font Awesome has to offer.
As you can see, Font Awesome is an amazing service with both free and paid options to style and add icons to your website so that potential customers do not want to leave your page. I highly recommend following them on Facebook, especially if you do any sort of web design or graphic design for your work.
Ready to follow along and learn? Good. I’m excited to share this. There will be more posts in the future that build off of this one so that you can really take your website to the top.
Let’s Get Started
First, open your stock text editing program (Notepad on Windows, Text Editor on Linux and TextEdit on Mac – if you are a more advanced reader, then obviously you can use whichever text editor program that you prefer) and go ahead and save the empty file as “index.html”. See the screenshot below for details:
Congratulations – you have just created a web page!!
Notice that the file type is “.html” and not “.txt”, which is typically what you save as when working in a text editor. For simplicity, let’s just save to the desktop.
Now, let’s open the index.html file in our text editor. Note: your computer may default to opening it in your browser, in which case you will just get an empty web page; if this happens then be sure to right-click, select “Open with other program”, and then select your text editor. Next, once the index.html file is open in your text editor, we need to add some code. Don’t worry, you don’t need any background in programming to follow these steps.
Begin by copying and pasting this to the top of your web page.
<h1>Welcome to My Website!</h1>
<h4>You will not want to leave this website when you see our social media icons!</h4>
<p>Check out these social media icons below:</p>
OK, let’s save that for now. We will add more stuff later. Next, let’s see how this very simple web page looks.
Let’s open our web page by double clicking the icon on the desktop. You can open this web page in any browser.
Pretty cool, right? Now that our web page is working, let’s spice things up by adding our social media icons from Font Awesome!
Using Font Awesome and Creating an Account
First, you will need to create a free account with Font Awesome. You can do so by following this link and then creating your profile (be sure to save the password somewhere safe).
You can quickly see that Font Awesome has an icon for just about everything – not just social media. I would recommend browsing their library and see how else their fonts and icons can serve your business needs.
Now that you have a Font Awesome account, we can go through and add some social media icons that are actually links to your business’ social media pages! I’ll add Facebook and Instagram icons to this simple web page since those are popular social media platforms for marketing small businesses.
The image below shows the first four steps that we need to perform in order to get Font Awesome’s icons to show up on our website.
1. After you are signed in, click on “Icons” in the top header menu.
2. Click “Free” in the sidebar. This filters out all of the icons you have to pay for, leaving you with only the free options.
3. Type “facebook” in the search bar.
4. Select the first icon, the classic Facebook “f”.
When you click on the “f”, you will be taken to a page that looks like this. Scroll down a bit and click on the button that says “Start using this icon”.
A pop-up should then appear with some code in it. Click on the blue clipboard icon to the right of the code to copy it to your computer’s clipboard. Then, paste the code into your index.html file, right below the line with “<p>Check out these social media icons below:</p>”.
Repeat steps 1-4 above, except this time type “instagram” in the search bar, and select one of the free Instagram icons. It does not matter which icon you choose, but in this demo, I am choosing the first one because to me it looks like it matches the style of the Facebook “f” that we are using pretty well. After you have done all of that, your final code should look like this:
Alright, let’s fire up the website and see what happens!
If you followed my instructions correctly, the icons should NOT appear correctly! That is because we did not add a script in our code to (a) allow our computer to talk to the servers that Font Awesome hosts their icon files on, and (b) allow Font Awesome’s computers to give our computers permission to use their fonts on our websites. This idea of two computers talking to and sharing information with one another is a very important aspect of website development, and programming in general, so I left it out in order to emphasize how important these scripts are in the programs you use and write.
Let’s Fix It!
So, let’s go back into the index.html file, and add a new line in between the tag and the tag. Copy and paste this into the new line; the picture below the code shows how it should look.
<script src=”https://kit.fontawesome.com/8d9154d851.js” crossorigin=”anonymous”></script>
NOW, let’s double-click on the icon for “index.html” in the desktop, and see how the website looks!
Awesome, the icons from Font Awesome are there!! Now, the great thing about these Font Awesome icons is that they work with standard CSS code that you typically use to style a web page. I’m not going to go into CSS here, but let’s add some in-line CSS to our HTML to make these icons pop a bit more. If you’d like to understand more about designing websites with CSS, then start here (https://www.w3schools.com/css/). We are going to change the colors, make them a bit bigger, and put some space in between them. Modify your code below (only the <i> elements for the icons) to have the following:
Facebook: style=”color:blue; font-size:50px; margin-right:25px;”
Instagram: style=”color:grey; font-size:50px;”
The Final Product!!!
Once you refresh your browser, your website should look like this!
Congratulations! You have just learned how to use Font Awesome. Again, this is a great starting point for using your website to increase awareness of your social media pages. There are many more possibilities to be had when incorporating Font Awesome in your website’s HTML, and I will start getting into those in following posts.
In the next post, we will go through how to add links to these icons, and then configure them for use in a website menu using various tricks for HTML and CSS. You can see an example of these social media icons in action on Allen Family Dentistry’s website at the top of their website. If you followed along, learned anything, have any questions, couldn’t get it to work for you (it happens a lot when learning to code), or even if you think that this post was terrible and I should never write another one, please let me know!