如何在<a>标签中使用FontAwesome 6.4 SVG图标？

将图标类从<a>标签移到内部的<i>标签上，这样替换脚本只会处理<i>标签，<a>标签会完整保留：

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

替换后的最终结构会是<a>标签包裹<svg>图标，完全符合你的需求。

方法二：直接引入SVG代码到标签内 #

如果你不想依赖FontAwesome的替换脚本，可以直接复制对应图标的SVG代码，放在<a>标签内部：

<p class="my-certificate">
    <a href="https://www.example.com/" target="_blank" rel="noopener">
        <svg class="fa-brands fa-facebook" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <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>
</p>

这种方式无需依赖替换脚本，直接渲染SVG图标，同时<a>标签保持完整可用。

内容的提问来源于stack exchange，提问作者Nick