Video Transcript:

One of the great features of EverWeb is that it is very easy to extend the reach of the product using third party software and other tools.

In this video tutorial I am going to show you how you can use Font Awesome icons to install scaleable vector icons in your website.

To begin with let’s have a look at the Font Awesome website.itself (www.fontawesome.io). Font Awesome is also absolutely free to use.

To start embedding icons in your website first go to Font Awesome’s ‘Getting Started’ page. Enter your email address in the box and then click on the ‘Send my Font Awesome Embed Code’ button.

The email that you receive contains a line of code that you will need to copy to the clipboard so you can embed it in EverWeb. This line of code makes all of Font Awesome’s icons available throughout your website. There is nothing that you need to download or install.

Once you have copied the code to the clipboard go in to your EverWeb Project file. Click on your website name, and you will see the ‘Site Publishing Settings’. In the Head / Footer code section go in to the Head Code section and paste the code in.

With the embed code in place, you can now start adding Font Awesome icons in to your web pages.

I’m going to show you an example on my home page. First of all I am going to go to the Widgets tab and drag and drop the HTML Snippet widget on to my page.

Now I am going to go back to Font Awesome and go to the ‘Examples’ page. This page has lots of great and varied examples for you to try even if you have little or not HTML coding experience.

In my example I am going to use the ‘Larger Icons’ section. I am going to copy all of the code in this section to the clipboard using Cmd+C. Then I go back to EverWeb and paste the code into the ‘HTML Code’ box. Next I press the ‘Apply’ button to finish to make the changes active.

You can see that the icons are now displayed on my screen together with their icon name beside each icon. If I do not want to see the icon name I just edit the code and remove the text, in this example ‘fa-5x’ as you can see here. Remember to press ‘Apply’ to see your changes.

In my example I do not want the smaller cameras so I just delete the code I do not want. Then I click apply.

That’s all you need to do to start using Font Awesome.

For more information go to the Font Awesome website (www.fontawesome.io). There’s also information about Font Awesome on the W3Schools (w3Schools.com) website which is a great place to go to if you are interested in learning about HTML.