Mac SEO Blog

If you have not heard of Font Awesome, it’s a collection of over 600 scaleable icons that you can include in your web pages and it’s absolutely free! In addition, Font Awesome’s icons do not need to be downloaded and they can be updated by those who supply them. For example, Google updated its Google+ icon about a year ago and later updated its Font Awesome icon. The updated icon is automatically used in your web pages so you do not have to update. or republish. your website. The icons can be customized so that you can combine icons together, change the icon’s color and other effects. Last but not least, using Font Awesome’s icons is a great way to ‘dip you toes’ into the ‘waters’ of HTML.

Getting Started With Font Awesome

To start using Font Awesome icons is very simple and only takes a few steps:

1. Go to the Font Awesome website and click on the ‘Getting Started’ menu.
2. Sign up by entering your email address and clicking on the ‘Send my Font Awesome embed code’ button.
3. Check your email. If you have not received an email, check your junk mail folder just in case.
4. Copy the CDN (Content Delivery Network) embed code from the email to the clipboard.

Adding Your Font Awesome Embed Code in EverWeb

The CDN embed code is going to be added to your EverWeb Project file. Font Awesome uses the CDN, or Content Delivery Network, as a simple, fast and efficient way of loading and rendering icons on your page. Now that you have copied the CDN embed code, you can use it in EverWeb:

1. Open your Project file in EverWeb
2. Go to the ‘Site Publishing Settings’ either by clicking on the website name in the Web Page List or by using the File-> Edit Publishing Settings menu.
3. Go to the Header/Footer Code section. In the Header Code section, paste in the CDN embed code.

You are now all set up to use Font Awesome icons in your Project. As you have added the code to the Project’s Header code section, the embed code is now available on all of your Project’s pages so you place add icons anywhere in your website.

Using Font Awesome Icons in EverWeb

Now that everything is set up you can start to use Font Awesome icons. Each Font Awesome icon has its own name e,g. the Instagram icon is called ‘fa-instagram’, an icon representing a desktop pc is called ‘fa-desktop’ and so on.’fa’ is used as a prefix to identify the icon as a Font Awesome icon. All available icons and their names are listed on Font Awesome’s Icons page which is sorted by category and completely searchable.

To get started, it’s a good idea to try out some examples from Font Awesome’s ‘Examples’ menu. You will find a great camera example in the ‘Larger Icons’ section which shows you how to scale the icon to different sizes, a ‘Stacked Icons’ section that shows you how you can place icons on top of one another and so forth.  Even if you have never had any experience in HTML it is easy to get started using the code relating to each icon.

To add an icon to your page in EverWeb do the following:

1. Start with an example from Font Awesome’s icon page e.g. the camera in  the ‘Larger Icons’ section.
2. Copy the code that relates to the icon on the left hand side e.g. for the largest camera icon displayed,  copy the code on the right of it to the clipboard e.g.

   <i class="fa fa-camera-retro fa-5x"></i> fa-5x

3. Next, in EverWeb, drag and drop the HTML Snippet widget on to the page.
4. Paste the code you have copied from the clipboard in to the the ‘HTML Code box’ of the widget and press ‘Apply’ to implement the code.
5. The widget will update in the Editor Window. In this example above, the camera icon and the name of the icon (fa-5x) are displayed.

If you do not want the text that is displayed, just delete the text ‘fa-5x’ from the end of the line of code and press the ‘Apply’ button again to update the widget.

Next you may want to start using other icons e.g. to use a Facebook icon with the same size as the camera example, you could use the code

<i class="fa fa-facebook fa-5x"></i>

in the HTMLSnippet widget. Use the examples in Font Awesome’s website to experiment more, especially if you are new to coding. Use the examples to stack icons, create lists of icons, animate icons and so on. There is plenty to discover! You will usually see the results of your work immediately in EverWeb as the HTML Snippet widget updates when you press the ‘Apply’ button.

More Help and Resources

The main source of help is the Font Awesome website itself. It has many examples and a blog where you can find out more information, hints and tips on using these icons.

As Font Awesome involves some coding, the W3Schools website may also be of use as it has a specific section dedicated to Font Awesome as well as further examples and information on how to start with HTML if you are interested.

Enjoy discovering Font Awesome in EverWeb!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw