Arian SimonWeb Designer - Business Owner - Entrepreneur who makes happy little mistakes.
One thing enriches websites like no other.
In my last two posts I showed you how you can find cool free stock images or paid premium stock photos. In this post I’m going to show you how you can find and implement cool icons into your website. But let’s go into detail first, why you want to use images and icons.
Table of Contents
First of all images and photos grab attention. They also convey emotions. Graphics can furthermore be used to simplify complex data in charts and whatnot. There is also a common saying that pictures tell more than words and to an extend I feel this is true for myself too. And last but not least images are good for search engine optimization. Google likes images which relate to your post’s topic.
How does Google know?
Simply by reading the alt-tag which can be connected to your image. However I believe Google scans images and compares them with similar or the same images on other sites (if they don’t do it already it will come in the near future – mark my words).
For example if you buy a stock image, this image is most likely used on many other sites as well. Google indexes all these images and scans them for graphical key points and similarities. This is how the reverse image searches of Google and TinyEye work.
However images need to be placed wisely if you want to get good conversion rates (= people buying your product). Kissmetrics wrote an in depth post about image placement and conversion rate. You can find it here.
Technically there are two ways how you can implement icons into your website:
I assume you know already how you can implement icons as graphics. So I’m going to show you how you can implement cool icons as fonts. There are a couple of fonts out there which offer beautiful designed website icons.
The most prominent website icon font is font awesome. And it’s free.
There are even more free font web kits available. Because they are already awesome I will spare you with the paid versions. Just Google “website icons font” if you really want to throw away some cash.
Other free icon databases and website kits:
Font Awesome is a free font set featuring website icons. In the next chapters I’ll show you how you can implement your icons as fonts. I’m going to do this with Font Awesome but this translates to all other icon sets as well.
There are three convenient ways how you can install icon font sets into your website.
Font Awesome provides a one-liner of code to implement it. This options is kind of sponsored by MaxCDN.
So if you don’t want to spend much time simply copy this code below into the
<head> sections of your sites:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
That’s it. Now you can go down to the next chapter “How To Use Your Icon Fonts”.
Instead of adding an internal style sheet you can also upload the font on your web server and implement it with this code in your header:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
You can download the FontAwesome Package on their main page.
(Simply click the big button “Download”)
If you don’t like above solutions you can also implement font icons via @Font-Face.
Download the font-awesome files and upload them to your web server.
In your style.css (WordPress) add following line:
src: url("path/to/fontawesome.eot?#iefix") format('embedded-opentype'), url("path/to/fontawesome.woff") format('woff'), url("path/to/fontawesome.ttf") format('truetype'), url("path/to/fontawesome.svg#fontawesomeregular") format('svg');
Now you need your icon’s “content” code to use them. To get it, move to the Font Awesome Icon Index, choose your icon and click on it. The icon’s detail page will open. Right click the icon and choose “Inspect” inside your web browser. Now search for a line “content”. It will result in something like
content: "\f06c";. This is your icon’s content code.
If you want to use this icon, create a span and paste this code:
Inside your style.css create the class awesomeicons:
However it’s a bit easier to use the html code. You can find your icon’s html code in this cheatsheet. The html code of the leaf icon is:
To use the icon’s html code simply create another span like this:
If you want this a bit more in depth you can go to this guide on the official font awesome site. If you just want the short version read on.
There are two ways you can implement your icons.
Font Awesome provides a simple way to implement their icons. Simply add the following line to wherever you want an icon:
<i class="fa fa-leaf"></i>
fa-leaf with the icon you want. You can look up all possible icons here. Click on the icon of your choice and copy the icon’s code.
If above solution doesn’t work for any reason you can also implement your fonts via the icon’s code. Refer to the “Advanced – @font-face” chapter above for an in depth explanation.
Alright, that’s it for today. Hope you got high value out of my post and can use it for your own websites too.