FontAwesome icons working in CKEditor 5

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">&nbsp;</i> or via the portal <i aria-hidden="true" class="fal fa-external-link-square">&nbsp;</i></p>