How to Use Font Awesome Icons in Weebly?

Font awesome icons are scalable vector icons originally developed to use with Bootstrap framework and later made available for others. As the name indicates Font Awesome icons are simply awesome to use anywhere on your site for multiple purposes. The icons are scalable meaning you can use same icon in different sizes without losing the quality of the display. At this moment Weebly does offer any default option to add icon fonts to your site elements. In this article we will discuss why and how to use font awesome icons in Weebly site.

Why Should You Consider Using Font Icons?

There are multiple reasons why you should consider using font icons:

• Icons are free to use for personal and commercial uses.
• You do not need image and JavaScript for making icon which improves the site loading time.
• The look of the icon can be completely customized with CSS.
• Different sizes of icons can be used with perfect resolution.
• Highly attractive on devices with retina display.

You may be seeing the use of font icons on other platforms like WordPress and wonder how this can be done on Weebly site.

How to Use Font Awesome Icons in Weebly?

Though there are many ways of using font awesome icons we will explain two simple methods:

• Using Bootstrap CDN from any CDN services like MaxCDN
• Hosting font awesome icons on your own site

Using Bootstrap CDN

This is the simplest, reliable and easy way to use font awesome icons on your site without any problems. You need to just link the following stylesheet under header section of your page or site.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

We recommend linking the stylesheet in header section of any of your page under “Pages” tab before deploying it on the live site. Possibly you can create a test page hidden from search engines or create a test site and link the stylesheet in header section under “Settings” tab. Note that font awesome icons will work on a free Weebly site and there is no need of premium plans for this purpose.

Hosting on Your Site

Instead of using Bootstrap CDN CSS, you can also download the complete font files and CSS from font awesome site’s home page on Github. Upload the entire folders in your Weebly site by editing the source HTML/CSS. Ensure to upload all types of fonts and CSS files as shown in the picture below:

Link the CSS file to the header section of the required page or at site level.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

You can use either .css file or .min.css file. The minified version is recommended in live site since it improves the site loading time.

Usage Examples of Font Icons

Once you decided whether to upload the stylesheets and fonts or use the CDN CSS then the next step is to use it on your page using “Embed Code” element.

Let us taken an example of adding a gear icon on your page, the format of adding a font awesome icon is simple like below:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

The syntax contains three parts:

• <i>…</i> – each icon should be used within the <i> tag.
• fa – font awesome CSS class prefix.
• fa-phone-square – actual icon name.

The output of the above code pasted inside the “Embed Code” element will be like below:

Increasing the Size of the Icon

There are five CSS classes to increases the size of the icon as below:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33%
<i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x
<i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x
<i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x
<i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Unlimited Customizations

Once you get a hand on using the font icons there are lot useful ways they can be used on a site. For example, you can add a list as below:

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List item 1</li>
<li><i class="fa-li fa fa-check-square"></i>List item 2</li>
<li><i class="fa-li fa fa-check-square"></i>List item 3</li>
<li><i class="fa-li fa fa-check-square"></i>List item 4</li>
</ul>

The list will like below:

You can refer the examples to check how easy to add many features on your site with font icons. Also refer the cheat sheet to quickly get the icon names. You can also use the Unicode instead of icon name. For instance, in the above example of list icon instead of using the icon name fa-check-square you can use its equivalent Unicode value &#xf14a;.