Icons can be used effectively in a user interface. Finding an extensive set of ready-to-use icons is not an easy task; unless you are a graphic designer with plenty of time on your hands, creating your own is out of the question. There is a 100% free version as well as a premium version available. There are also plugin versions for Font Awesome in WordPress I have started using a sprinkling of icons on the blog to add some UI icon-goodness !
In this tutorial:
Codepen
I recommend playing around with Font Awesome in Codepen for a while before incorporating it into your projects.
See the Pen Font Awesome basics by David Fox (@foxbeefly) on CodePen.
Codepen config
Here are the steps to enable Font Awesome in your Codepens:
- Locate the CSS section
- Open CSS settings button
- Confirm that you are in the CSS section
- Search for fontawesome in the search box
- Confirm the URL for the CDN; as of writing this post it is
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css - Click the Save & Close button
Your project
You can easily include Font Awesome in your project. Be aware that there is a limit to the number of times your Free Plan kit can be used (10,000 pageviews per month), so you would most likely need to use the premium version on a commercial project.
The easiest way to use it is by setting up a Free Plan kit and then including it in your web pages as follows:
<head>
<script src="https://kit.fontawesome.com/nnnnnnnnnn.js" crossorigin="anonymous"></script>
</head>
You will replace nnnnnnnnnn with the unique project key provided.
References:
- Font Awesome (No date) Font Awesome. Available at: https://fontawesome.com/ (Accessed: 18 November 2023).