How to add Programming Language Logos on Your Portfolio

In this blog, I will show you step by step how to add logos from programming languages to your portfolio site. Where can we get these logos from? We can surely use Google to get the logos, but would be more work because the images would have different sizes such as width and height. In this tutorial, we are going to use Devicon!

What is Devicon?

As stated in the documentation, Devicon is a set of icons representing programming languages, designing & development tools. You can use it as a font or directly copy/paste the svg code into your project.

Let’s Get Started!

Copy the link and paste it before the end of the </head> tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css">

Implement it!

Find a logo you would like to display, for example I will use the Bootstrap logo. Click on it and you get so many options, take a look below:

To use the logo, copy the code under ‘in your body’ and paste it within your portfolio. In this case, for us to use the Bootstrap Logo with the name and colored we have to use this code:

<i class=”devicon-bootstrap-plain-wordmark colored”></i>

Test it Out!

Run your portfolio live and check that it is working. If not, make sure the link was within the head tags. You can also view the GitHub repo provided under resources to learn more about Devicon.

Resources

For more information about Devicon, checkout their GitHub repository by clicking here, also check out their homepage by clicking here.