Font Awesome is one of the world's most popular icon sets. Among a lot of other uses, it can give your website stylish clean lines and a professional look. Using Font Awesome with Drupal makes your site look modern and integrating it into a Drupal application is straightforward. Here’s how to do it. It’s a simple process with the right modules. Follow these steps, and you’ll have Font Awesome icons on your Drupal site in no time.
Drupal 10+ uses CKEditor 5. The new CKEditor is different. It needs specific modules for Font Awesome to work. There isn't a ton of great documentation on all of this which is my reason for writing this article -- to help the community learn and continue to build modern, lightweight sites.
You need two modules in order to add Font Awesome icons to your Drupal 10+ site:
1. CKEditor 5 Icons module
2. Font Awesome module
🌊 Let’s dive in. 🌊
Step 1: Install the CKEditor 5 Icons module. This module integrates CKEditor 5 with Font Awesome.
- Download the module from drupal.org.
- Include it with Composer:
composer require 'drupal/ckeditor5_icons:^1.1' - Install it via the admin UI. Go to “Extend” and search for CKEditor 5 Icons. Check the box and click “Install.”
Step 2: Install the Font Awesome module.
- Download the module from drupal.org.
- Include it using Composer:
composer require 'drupal/fontawesome:^2.26' - Install it via the admin UI. Go to “Extend,” search for Font Awesome, check the box, and click “Install.”
Step 3: Configure CKEditor 5 Icons module in Drupal.
- Go to “Configuration” in the admin toolbar.
- Click on “Text Formats and Editors.”
- This is located at:
/admin/config/content/formats - Edit the text format you want to use with CKEditor 5.
- Add the Font Awesome button to your toolbar.
- Save the configuration.
Step 4: Configure the Font Awesome module in Drupal.
- Go to “Configuration” in the admin toolbar.
- Click on “Font Awesome.”
- Set the library version and choose the version of Font Awesome you want to use.
- Save the configuration.
Step 5: Now, you can use Font Awesome icons in your content.
- Open a content type that uses CKEditor 5.
- Click on the Font Awesome button in the toolbar.
- Choose an icon from the Font Awesome library.
- Insert the icon into your content.
- You can also select Source to view your code in CKEditor 5 and use the CSS classes that Font Awesome provides like this for the duotone bulldozer
<i class="fa-duotone fa-solid fa-bulldozer"></i>
Conclusion
That’s it. You have successfully integrated Font Awesome into your Drupal application. Remember, the CKEditor 5 Icons module in particular; it’s required for Drupal 10+ and CKEditor 5. I hope this article helps the community continue to learn and build cool sites. Happy coding. ⚡ ⚡ ⚡
