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.
As of now, the full list of available devicons is as follows
I gave the user the option to include an icon inline like this using the shortcode:
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]
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.
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.