Andrew Fletcher published: 25 July 2023 1 minute read
Using CK Editor 5, I needed to add instructions to a page that held FontAwesome (FA) icons. Included in these instructions were a couple of FA icons. Initially adding them was going to be resolved using Pseudo-elements. Accordingly they would be applied as follows:
.download-icon, .portal-icon {
position: relative;
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.download-icon::before,
.portal-icon::before {
font-family: FontAwesome;
top: 0;
left: -5px;
padding-left: 4px;
padding-right: 0;
}
.download-icon::before {
content: "\f33d";
}
.portal-icon::before {
content: "\f14c";
}
However, one of the icons partially worked (wrong weight) and the other had the doomed FA square.
To get the weight correct you can use
font: var(--fa-font-light);
But issues remained getting the icon instead of the square.
Pseudo-elements have there challenges.
What about if I applied the FontAwesome i tag. The key to remember is i tags in CKEditor are removed if there is no content. The following line
<p>Reports are available as a downloadable PDF <i aria-hidden="true" class="fal fa-arrow-to-bottom"></i> or via the portal <i aria-hidden="true" class="fal fa-external-link-square"></i></p>
On saving would become
<p>Reports are available as a downloadable PDF or via the portal </p>
Adding a space will keep them as display
<p>Reports are available as a downloadable PDF <i aria-hidden="true" class="fal fa-arrow-to-bottom"> </i> or via the portal <i aria-hidden="true" class="fal fa-external-link-square"> </i></p>
Related articles
Andrew Fletcher
•
11 Feb 2025
Webpack build process and theme automation improvements
The Drupal theme configuration has undergone recent changes made to the Webpack configuration, SCSS and JavaScript handling, and automation of updates to the orw.libraries.yml file in the custom Drupal theme. These changes are designed to improve the build process, enhance maintainability, and...
Andrew Fletcher
•
30 Jan 2025
Enhancing accessibility in Drupal by adding aria-label to input fields using Twig
Accessibility is a fundamental aspect that ensures experiences are inclusive for all users, including those relying on assistive technologies. One crucial accessibility feature is the use of `aria-label` attributes to provide contextual information for form inputs. In Drupal, we can dynamically set...
Andrew Fletcher
•
22 Jan 2025
Removing a missing module in Drupal
Occasionally, a Drupal site may display a warning about a module being "Missing or invalid." This issue occurs when a module is marked as installed in the configuration but is no longer present in the file system. A common example is the `fakeobjects` module, which is associated with CKEditor 4 and...