About Font Awesome
Font Awesome is an icon toolkit that revolutionizes web design and development.
With an extensive collection of scalable icons, it opens doors to endless possibilities for visually captivating web content. These icons can be customized to suit your unique needs, ensuring versatility, accessibility, and compatibility across various devices and browsers.
Novi websites fully support Font Awesome icons, up to version 6.4.0. You can access over 2,000 icons without any cost under an open-source license. If you're searching for the perfect icon to convey your visual story, simply follow the provided link and explore the vast selection.
In case you can't find a free icon that meets your requirements, Font Awesome offers an extensive library of over 26,000 icons through their "Pro" level license. It's important to note that while Novi's code allows for the addition of a "Pro" level icon, you must obtain your own license to ensure compliance with Font Awesome's terms of service. Unauthorized use of "Pro" icons without the proper license is a violation of their terms.
Elevate your web design by incorporating Font Awesome's iconic icons, whether you opt for the free open-source collection or choose to unlock the full potential with a "Pro" level license.
Choose A New Icon
Navigate to https://fontawesome.com/icons. You won’t need to login to find an icon.
Use the Search Icons bar at the top of the site to search for the type of icon you are needing. For example, searching "home" will show you icons of a house.
From the list of results, find a new icon you like and click to view the details. If you don't have a PRO account (mentioned above), be sure to filter to Free icons:
Once you've selected your icon, click to copy the HTML line code for the icon from the details page.
Update The Icon On Your Website
Once you've selected an icon, it's time to use it! You can enter an icon wherever you're able to enter source code into an editable region.
For example, depending on your website's layout, you may have icons either in the top navigation section:
In the callout section of your homepage:
...or any other editable region!
Making changes to these icons does require a bit of comfort with updating HTML source code, but never fear! We're here to walk you through it.
Using the frontend content editor in your section, open the Source Code under Tools.
Add the HTML code for the new icon
You will need to combine the HTML code you copied from Font Awesome with the existing code to keep the style formatting to match the other icons on your site.
For example, if the original icon's HTML code is:
<i class="far fa-calendar-alt c-four-col-hp__icon"> </i>
...and the new icon's code you copied from Font Awesome is:
<i class="fas fa-home"></i>
Paste the code you copied, add the missing piece (c-four-col-hp__icon) and delete the original icon's code. The final code to update with the example of a calendar icon would be:
<i class="fas fa-home c-four-col-hp__icon"></i>
Be sure to save. Now you have a new icon!
Update The Icon and Text Links
Once you've updated your icon, don't forget you may need to also change the link for the icon and/or the text link below the icon.
Update the Icon Link
To update the link for your icon, first copy the friendly file name of the new page you will link to. A quick way to ensure you have the correct link, in a separate browser window, navigate to the page and copy the friendly file name from the URL:
Next, update the URL reference code within the Source Code for the icon you are linking. For example, if the original friendly file name is:
href="/membership-information"
& the new friendly file name is:
/events/?CalendarView=1
Paste the URL reference you copied, and delete the original icon's URL code. The final code to update with the example of a calendar icon would be:
href="/events/?CalendarView=1"
Update the Text Link
Click in the text below the icon you need to update. Use the frontend content editor Insert/Edit Link to update the URL and Text to Display.
Related Articles