Hi Guy and girls

Just a quick tip here regarding icons. Although you can try and do everything yourself on a project, and be like this designer/coder/tester/backend/frontend developer I can assure you, no one can do it all! In light of this I have decided to talk about icons.

Basically I’m not a great graphic designer and when I make icons I think they look good until I compare them with other people’s so instead in the past I have used Font Awesome. In a nutshell Font Awesome is a collection of icons that do all those cool things you see on modern day websites…and it’s awesome!

To get started you want to jump over to https://fortawesome.github.io/Font-Awesome/ and download the latest version and get iconing. Alternatively for a quick fix just past the CND link into the head section of your site. For all those super lazy people who can’t even be bothered to do that just copy and paste the code below into a new HTML document and your sorted like a peanut.

To see a list of the icons available just click here. As you can see there’s quite a lot. If you want to make the icons bigger or smaller just add the class “fa-?x” substituting the question mark with a number. The higher the number the bigger the icon. It’s all in the code below…enjoy!


<!DOCTYPE html>
<html>
<head>
  <title>An awesome icon page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
  <h1>Icons</h1>
  <p><i class="fa fa-quote-left"></i>You gotta love them!<i class="fa fa-quote-right"></i></p>
  <div><i class="fa fa-android fa-4x"></i></div>
  <div><i class="fa fa-apple fa-4x"></i></div>
</body>
</html>