I’m using FontAwesome 6.4 as SVG. However, when I try to use it in my anchor tag <a> element, it is being replaced with FontAwesome’s <svg> tag. How can I use the icons in my anchor link element?

I have tried the following:

<p class="my-certificate">
    <a href="https://www.example.com/" target="_blank" class="fa-brands fa-facebook" rel="noopener"></a>
</p>

However, this gets converted to the html below, with the hyperlink anchor tag <a> element commented out:

<p class="my-certificate">
    <svg href="https://www.example.com/" target="_blank" class="svg-inline--fa fa-facebook" rel="noopener" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
    </svg>
    <!-- <a href="https://www.example.com/" target="_blank" class="fa-brands fa-facebook" rel="noopener"></a> Font Awesome fontawesome.com -->
</p>

>Solution :

In FontAwesome 6, JavaScript is loaded to replace your element into a svg. In order to solve this, you can make it a children of your a using i element instead:

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<p class="my-certificate">
  <a href="https://www.example.com/" target="_blank" rel="noopener">
    <i class="fa-brands fa-facebook"></i>
  </a>
</p>

(Fun fact: i element stands for italic but it is short enough for people to treat it as the acronym of Icon)