diff --git a/src/__fixtures__/page.tsx b/src/__fixtures__/page.tsx
index 8e9abdf47..b1490eff7 100644
--- a/src/__fixtures__/page.tsx
+++ b/src/__fixtures__/page.tsx
@@ -17,8 +17,8 @@ export const createAsciidocData = (): {
             }</code></pre>
             <table><thead><td>Header 1</td><td>Header 2</td></thead><tbody><tr><td>Cell 1</td><td class="icon">Cell 2</td></tr></tbody></table>
             <a href="https://www.eclipse.org">Eclipse</a>
-            <span class="icon">[docker]</span>
-            <span class="icon">[check]</span>
+            <i class="fa fa-docker"></i>
+            <i class="fa fa-check"></i>
             <div class="toc">
                 <ul class="sectlevel1">
                     <li><a href="#section-1">Section 1</a></li>
diff --git a/src/util/asciidocFormatter.tsx b/src/util/asciidocFormatter.tsx
index e08a26315..6c0811aad 100644
--- a/src/util/asciidocFormatter.tsx
+++ b/src/util/asciidocFormatter.tsx
@@ -18,19 +18,11 @@ export default function asciidocFormatter (t /* 't' from useI18next to retrieve
       link.append(anchorIcon)
     }
   })
-  // Hack to get fontawesome to render correctly
-  const spans = document.querySelectorAll('span')
-  spans.forEach(span => {
-    if (span.className === 'icon') {
-      const iconName = span.innerHTML.substring(1, span.innerHTML.length - 1)
-      let iconClass = 'fa'
-      if (iconName === 'docker') {
-        iconClass = 'fab'
-      }
-      const archiveTypeIcon = document.createElement('i')
-      archiveTypeIcon.className = `${iconClass} fa-${iconName}`
-      archiveTypeIcon.ariaHidden = true
-      span.replaceWith(archiveTypeIcon)
+  // Look for i class="fa fa-docker" and replace with fab fa-docker
+  const icons = asciidocContent.querySelectorAll('i')
+  icons.forEach(icon => {
+    if (icon.className.includes('fa-docker')) {
+      icon.className = icon.className.replace('fa', 'fab')
     }
   })
   const tds = document.querySelectorAll('td')