Font Awesome Pro 6.0 Duotone图标图层位置异常问题求助

针对Duotone图标图层错位的问题，可通过以下两种方式修复：

方法一：使用官方类交换图层顺序 #

Font Awesome提供了fa-swap-opacity类，直接添加到图标元素上即可交换主次图层的显示顺序，让secondary图层和primary图层互换层级：

<style type="text/css">
    .fa-duotone{
        font-size:30px;
        text-align:center;
    }
</style>

<i class="fa-duotone fa-crow fa-swap-opacity" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
<i class="fa-duotone fa-campfire fa-swap-opacity" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>

方法二：通过CSS变量调整图层顺序 #

如果不想额外添加类，也可以直接在元素的style属性中设置--fa-swap-opacity: 1变量，同样能实现图层顺序交换：

<style type="text/css">
    .fa-duotone{
        font-size:30px;
        text-align:center;
    }
</style>

<i class="fa-duotone fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold; --fa-swap-opacity: 1;"></i>
<i class="fa-duotone fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red; --fa-swap-opacity: 1;"></i>

额外检查项 #

确保项目中已正确引入Font Awesome Pro 6.0的Duotone相关资源，比如完整引入Pro版的all.css：

<link rel="stylesheet" href="path/to/fontawesome-pro-6.0/css/all.css">

或者单独引入duotone.css：

<link rel="stylesheet" href="path/to/fontawesome-pro-6.0/css/duotone.css">

内容的提问来源于stack exchange，提问作者Asma Binta Younus