I saw this error happening over and over in a lot of places. People do not integrate their social links using Jekyll. Instead, they hard code them into HTML code. Well, there’s a better way and it’s pretty simple.
Of course, the first prerequisite is to install Jekyll. For those of you who don’t know, Jekyll is as simple static site generator as it can get. It allows you to create a website without worrying about the things such as databases.
The second prerequsite is to install Font Awesome. Font Awesome is the most popular icon font out there and it contains hundreds of icons. The icon pack is fully open source, so you can use it in any project you want (for further information about the licenses used, click here).
To include them in your project, open the
_includes directory in the root folder of your project. Then, using your favorite text editor, edit the file
Include this line at the bottom of the file:
That’s it, you’re done with setting things up.
Creating variables for the icons
_config.yml file in the root directory of your file. There, you’ll already see two variables, called
github_username. Now, add more variables:
Of course, you’ll need to replace my usernames with your usernames. If you don’t use some social medias I listed, just leave the username blank and don’t worry about it.
Find an appropriate place where you want to show your icons. If you want to show them in your footer, edit the
footer.html file from your
_includes directory. If you want to add them somewhere in the main body of your website, edit
index.html file from the root directory.
After you found the place, you’re ready for your next step.
Create an unordered list using the
<ul></ul> tag. Then, copy the codes below.
Now what these codes will do is they’re going to check your
_config.yml file you edited earlier. If they find an appropriate username, they will show the icon of that social network linking to your profile.
Of course, this is the screenshot on the default Jekyll installation. If you’re using a Jekyll theme, your result will look differently.
Note that I’m not using Dribbble. I left the variable
dribbble_username blank in the
_config.yml file, so the icon is not shown.
What if you’re not using some social media listed here?
You have two options. One is to not copy the code and the second one is to leave the variable in your
_config.yml file blank. The result is the same: the icon will not be shown, as seen in the Dribbble example above.
What if you’re using some social media not listed here?
Click here to see all of the icons available in the Font Awesome pack. If your icon is not there, the best thing you can do is to search for the issue in the repository. If you find it, add a comment supporting the idea. If you don’t find it, create a new issue.
Further customization of the icons
Refer to the examples of using Font Awesome pack. You can make them bigger, animate them, rotate them and a whole lot more.
Just leave the comment below. I’ll be more than happy to help you out.