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 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 use.
- 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.
Before Proceeding – About Font Awesome Icons
Until version 4x font awesome icons were completely free to use on any projects. However, you can get both free and paid icons from version 5 onwards. This changes the way you use CSS to define icons and you have the following options:
| Type | Plan | CSS Style Class |
|---|---|---|
| Solid icons | Free | fa-solid |
| Brands | Free | fa-brands |
| Regular | Pro | fa-regular |
| Light | Pro | fa-light |
| Thin | Pro | fa-thin |
| Duotone | Pro | fa-duotone |
You can use solid and brand icons with free plan and we will focus on how to use them in Weebly.
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 for Font Awesome version 5.
- Getting Font Awesome version 6 CDN and use it on your Weebly site.
- Host version 6 files on your site.
Check out the font awesome widgets for Weebly to see the icons in action.
1. Using CDN for Version 5
This is the simplest, reliable and easy way to use font awesome icons on Weebly site without any problems. You need to just link the following stylesheet under header section of your page or site.
https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.cssFor adding the icon on site wide, you can add this stylesheet under “Settings > SEO > Header Code” section in your Weebly site editor.
However, we recommend linking the stylesheet in “Header Code” section of required page under “Pages” tab. This helps to load the stylesheet only on the required page instead of loading on the entire site. Possibly you can create a test page hidden from search engines or create a test site and link the stylesheet to test how it works for you. Note that font awesome icons will work on a free Weebly site and there is no need of premium plans for this purpose.
2. Using Font Awesome 6 CDN On Your Site
Instead of using external CDN CSS link, you can also get a CDN link from font awesome by registering a free account. The difference here is that you will get CDN link for the latest version 6 which is not available from third-party services. We recommend using version 6 as this is the latest version and offer large number of icons under different sizes. Go to their site and enter your email address to get a starter kit.
You will get a confirmation email and need to verify your email address to get the starter kit. When you click on the confirmation link, it will take you to the account creation page where you can create a password and setup your account before start using icons on your site.
After creating your account, you will see a code and CDN link for font awesome version 6.
The CDN link will have the following format and specific for your account containing the kit name. As you can see, font awesome version 6 kit CDN is a JavaScript file unlike external CDN which is a CSS file.
<script src="https://kit.fontawesome.com/your-kit-name.js" crossorigin="anonymous"></script>You need to insert this CDN JS file in the header code section of the required pages or at site level as explained in the above method 1.
3. Hosting Font Awesome 6 File in Weebly Site
If you do not want to use CDN CSS or JS, the last option is to download the complete font files and host them on your Weebly site. This also require you to register for a kit and login to your font awesome account. You have two options to host font awesome version 6 on your site. One is to use web fonts + CSS files and other is to use SVG + JS files. After logging into your account, go to the documentation page and navigate to “Host Yourself:” section from the sidebar. Click on the “Download the Font Awesome v6 Files” link showing under “Before You Get Started Testing” box.
It will take you to the download page and click on the “Free For Web” button to download the files.
Extract the downloaded zip file which contains all required webfonts + CSS and SVG + JS files. You can choose one set of files and upload them in your Weebly site.
Go to your Weebly site editor and navigate to “Themes > Edit HTML / CSS” section. This will open the code editor where you can upload the files under “Assets” section. We recommend uploading the files by creating folders like CSS and webfonts or JS and svgs. Since there are too many SVG icons, you can choose to use the CSS method by uploading webfonts and CSS files.
The “all.css” file contains complete styles for all font awesome types. Since the free plan allows you to use solid and brands, you can choose to upload fontawesome.min.css, brands.min.css and solid.min.css files. After uploading files, save your theme and go back to the site editor. As explained above, you can add the below CSS in your site header or page header to insert icons.
<link href="https://yoursite.weebly.com/files/theme/css/font-awesome.min.css" rel="stylesheet">
<link href="https://yoursite.weebly.com/files/theme/css/solid.min.css" rel="stylesheet">
<link href="https://yoursite.weebly.com/files/theme/css/brands.min.css" rel="stylesheet">Using Font Awesome Icons in HTML
Once you decided whether to use version 5 or version 6, the next step is to use the icons on your page using “Embed Code” element. Let us take an example of adding a phone icon on your page, the format of adding a font awesome icon with version 6 is simple like below:
<i class="fa-solid fa-phone-square"></i> This is a font awesome phone icon.You can use the following syntax for using version 5.
<i class="fas 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-solid – font awesome CSS class prefix. As mentioned, above you can use solid and brands under version 6 free plan. You need to use fas class if you use version 5.
- fa-phone-square – actual icon class.
The output of the above code pasted inside the “Embed Code” element will be like below:
Increasing the Size of Font Awesome Icons
There are different CSS classes to increases the size of the icon for version 5 and 6 as given in the below example:
Adjusting size in version 5:
<i class="fas fa-phone-square fa-xs"></i> Extra small icon
<i class="fas fa-phone-square fa-sm"></i> Small size icon
<i class="fas fa-phone-square fa-lg"></i> Increases the icon size by 33%
<i class="fas fa-phone-square fa-2x"></i> Increases the icon size by 2x
<i class="fas fa-phone-square fa-3x"></i> Increases the icon size by 3x
<i class="fas fa-phone-square fa-5x"></i> Increases the icon size by 5x
<i class="fas fa-phone-square fa-7x"></i> Increases the icon size by 7x
<i class="fas fa-phone-square fa-10x"></i> Increases the icon size by 10xChanging icon size in version 6:
<p><i class="fa-solid fa-phone-square fa-2xs"></i> Double extra small.</p>
<p><i class="fa-solid fa-phone-square fa-xs"></i> Extra small icon size.</p>
<p><i class="fa-solid fa-phone-square fa-sm"></i> Small icon size.</p>
<p><i class="fa-solid fa-phone-square"></i> Regular size icon.</p>
<p><i class="fa-solid fa-coffee fa-lg"></i> Large size icon.</p>
<p><i class="fa-solid fa-coffee fa-xl"></i> Extra large icon.</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> Double extra large size.</p>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 with version 6:
<ul class="fa-ul">
<li><i class="fa-li fa-solid fa-check-square"></i>List item 1</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 2</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 3</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 4</li>
</ul>The list will like below:
You can refer the examples to quickly get the icon names to use in Weebly site. Note that you can also use the Unicode codepoint 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 .
Final Remarks
We recommend using Font Awesome icon version in your Weebly site using the custom CDN link. Though you need to register for an account, you can get a custom CDN link to use in your site. In addition, you can link the stylesheet only on the page header where you want to insert the icons instead of adding it in the site header.
2 Comments
Leave your reply.