Devicons WordPress Plugin

Devicons WordPress Plugin

Programming / WordPress /

Looking for a way to show your skills in a graphical way on WordPress? Devicons are an excellent open-source tool for doing it.

Project Completed: March, 2018

Approximate Time: 3 hours

Lines of Code: 163

Created With:

About The Project

I discovered the Devicons Project a little while ago and quickly integrated it into my WordPress themes. It’s a great way to show off the skills you’ve used for a particular project (like I’m doing right above this paragraph). I wanted to give back to the community and offer other designers and developers a simple way to add devicons like this wordpress icon into their sites.

The Full List

As of now, the full list of available devicons is as follows

 

Customizable Options

I gave the user the option to include an icon inline like this using the shortcode:

 [devicon icon="facebook"] 

Or as a full 50px icon with its own styling:

with the following shortcode:

 [devicons] wordpress facebook php visualstudio ubuntu apache [/devicons] 

 

Users can also set a custom colour with the color=”#222″ tag, putting their own hex code in between the quotation marks.

 [devicons color="#222"] wordpress facebook php visualstudio ubuntu apache [/devicons] 

 

Users can also choose whether to include the titles within the icon using the title=”true” parameter. Note: Not all icons however have available titles.

 [devicons title="true"] wordpress facebook php visualstudio ubuntu apache [/devicons] 

 

Some Challenges

Not all icons are available with the same options, so it took a little bit of creative coding to make everything as redundant as possible for the user.

 

Accessibility

I’ve been recently committing myself to a more accessible web, so every icon automatically has a title tag. When you hover over it, you will see the name of the language / software.