双色调图标
如果您想添加多种颜色或色调，或者交换图标的图层不透明度，那么您来对地方了。谁不喜欢赢利的口味组合呢？
我们的双色调样式与我们所有其他图标的工作原理相同，但具有两种截然不同的颜色。当您想在项目中的图标中添加更多品牌元素或插图效果时，双色调效果非常棒。
基本用法
双色调图标使用与 Font Awesome 图标相同的语法，您可以像使用其他任何图标一样使用它们的特定样式前缀 (fa-duotone ) 来引用它们。它们将继承周围的任何颜色，次级层将是主色调的透明版本。
<div class="fa-3x"> <i class="fa-duotone fa-camera"></i> <!-- a duotone style camera icon --> <i class="fa-duotone fa-fire-alt"></i> <!-- a duotone style fire-alt icon --> <i class="fa-duotone fa-bus-alt"></i> <!-- a duotone style bus-alt icon --> <i class="fa-duotone fa-fill-drip"></i> <!-- a duotone style fill-drip icon --></div>交换图层不透明度
您可以交换每个双色调图标的图层的默认不透明度。这将使图标的主层具有 40% 的默认不透明度，而不是其次层。
<div class="fa-3x"> <i class="fa-duotone fa-camera"></i> <!-- a duotone style camera icon --> <i class="fa-duotone fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->
<i class="fa-duotone fa-fire-alt"></i> <!-- a duotone style fire-alt icon --> <i class="fa-duotone fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->
<i class="fa-duotone fa-bus-alt"></i> <!-- a duotone style bus-alt icon --> <i class="fa-duotone fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity --></div>更改不透明度
默认情况下，双色调图标中的次级层设置为 40% 不透明度（通过 Font Awesome 支持 CSS 中的 opacity 0.4; 规则）。您可以通过使用以下CSS 自定义属性，**显式设置双色调图标图层的不透明度**。自定义属性新手？以下是一些在项目中使用自定义属性的建议。
| 属性 | CSS 自定义属性 | 接受的值 |
|---|---|---|
| 设置主层不透明度 | --fa-primary-opacity | 0 1.0 |
| 设置次层不透明度 | --fa-secondary-opacity | 0 1.0 |
<div class="fa-3x"> <i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.20"></i> <!-- secondary layer's opacity set to 20% --> <i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.40"></i> <!-- secondary layer's opacity set to 40% --> <i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.60"></i> <!-- secondary layer's opacity set to 60% --> <i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 0.80"></i> <!-- secondary layer's opacity set to 80% --> <i class="fa-duotone fa-bus-alt" style="--fa-secondary-opacity: 1.0"></i> <!-- secondary layer's opacity set to 100% --></div>
<div class="fa-3x"> <i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!-- primary layer's opacity set to 20% --> <i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!-- primary layer's opacity set to 40% --> <i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!-- primary layer's opacity set to 60% --> <i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!-- primary layer's opacity set to 80% --> <i class="fa-duotone fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!-- primary layer's opacity set to 100% --></div>为双色调图标着色
与所有其他 Font Awesome 图标一样，双色调图标会自动继承 CSS 大小和颜色。双色调图标由**主**和**次**两个图层组成。默认情况下，次级层的不透明度为 40%，因此它显示为图标继承或直接设置颜色的较浅色调。
使用CSS 自定义属性，我们还在双色调图标的主层和次层中添加了一些颜色钩子。自定义属性新手？以下是一些设置它们的位置。
| 属性 | CSS 自定义属性 | 接受的值 |
|---|---|---|
| 设置主层颜色 | --fa-primary-color | 任何有效的 CSS color 值 |
| 设置次层颜色 | --fa-secondary-color | 任何有效的 CSS color 值 |
<div class="fa-3x"> <i class="fa-duotone fa-bus-alt" style="--fa-primary-color: gold;"></i> <!-- primary layer color defined --> <i class="fa-duotone fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined --> <i class="fa-duotone fa-fill-drip" style="--fa-secondary-color: limegreen;"></i> <!-- secondary layer color defined --> <i class="fa-duotone fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined --> <i class="fa-duotone fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined --> <i class="fa-duotone fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined --></div>高级用法
当您将所有着色、不透明度和其他选项组合在一起时，Font Awesome 图标会变得更加出色。以下是一些关于如何使用双色调图标将您的项目提升到一个新水平的想法。
使用颜色突出显示图标的一部分或标记状态
<div class="fa-3x"> <i class="fa-duotone fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i> <i class="fa-duotone fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;" ></i> <i class="fa-duotone fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;" ></i> <i class="fa-duotone fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;" ></i>
<i class="fa-duotone fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;" ></i> <i class="fa-duotone fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;" ></i>
<i class="fa-duotone fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;" ></i> <i class="fa-duotone fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;" ></i> <i class="fa-duotone fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;" ></i></div>创建看起来像插图的全色图标
<div class="fa-3x"> <i class="fa-duotone fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;" ></i> <i class="fa-duotone fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;" ></i> <i class="fa-duotone fa-birthday-cake" style="--fa-secondary-opacity: 1.0; --fa-primary-color: pink; --fa-secondary-color: palevioletred;" ></i> <i class="fa-duotone fa-ear" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sandybrown; --fa-secondary-color: bisque;" ></i> <i class="fa-duotone fa-corn" style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;" ></i> <i class="fa-duotone fa-cookie-bite" style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;" ></i></div>使用品牌颜色主题化图标
<style> .theme-ravenclaw { --fa-secondary-opacity: 1; --fa-primary-color: rgb(4, 56, 161); --fa-secondary-color: rgb(108, 108, 108); }</style><div class="fa-3x"> <i class="fa-duotone fa-hat-wizard theme-ravenclaw"></i> <i class="fa-duotone fa-flask-potion theme-ravenclaw"></i> <i class="fa-duotone fa-wand-magic theme-ravenclaw"></i> <i class="fa-duotone fa-scarf theme-ravenclaw"></i> <i class="fa-duotone fa-book-spells theme-ravenclaw"></i></div>在项目中使用
CSS 自定义属性对于大多数人来说仍然是比较新的东西。我们已经记录了一些在项目中定义自定义属性的方法。
可访问性最佳实践
由于双色调图标由具有不同颜色值的两个图层组成，因此它们可能更像插图，而不是其他 Font Awesome 样式，因此需要格外注意可访问性。
由于它们在视觉上更复杂，因此双色调图标在较小尺寸下可能更难阅读。除此之外，您为每个图标的图层选择的颜色和不透明度也会影响其可读性。一些提高可读性和可访问性的技巧
自定义图标上传就像洋葱
现在它们有图层了！如果您有专业版，您可以在套件中添加您自己的双色调作品。赶快了解如何制作一些，以及如何使用它们，一旦它们在您的套件中。
双色调类
| 类 | 详情 |
|---|---|
fa-swap-opacity | 交换双色调图标中每个图层的默认不透明度 （使图标的主层具有 40% 的默认不透明度，而不是其次层） |
自定义
我们添加了CSS 自定义属性，以使自定义更容易、更高效。定义您自己的以下属性值，以覆盖和自定义 Font Awesome 的默认值。
| CSS 自定义属性 | 详情 | 接受的值 |
|---|---|---|
--fa-primary-color | 设置主层颜色 | 任何有效的 CSS color 值 |
--fa-primary-opacity | 设置主层不透明度 | 0 1.0 |
--fa-secondary-color | 设置次层颜色 | 任何有效的 CSS color 值 |
--fa-secondary-opacity | 设置次层不透明度 | 0 1.0 |
故障排除
我可以用 CSS 伪元素使用双色调图标吗？
是的，双色调图标样式可以与CSS 伪元素一起使用。这样做比使用 CSS 伪元素渲染图标的基本难度要更加复杂。仅建议那些无法控制其网站/项目的最终标记以及想要完全控制其标记的忍者使用。
糟糕！我想要使用的图标没有以双色调样式显示！
让我们仔细检查一下。
- 您是否使用了针对双色调的
fa-duotone样式前缀？ - 双色调图标仅适用于 Font Awesome 专业版，请确保您拥有活动的专业版或可以访问**5.10.0 版或更高版本**的专业版许可证。
- 我们现在经常发布图标。请确保您使用的是最新版本，这样您就可以轻松使用任何您想使用的图标。
- 如果您决定托管您自己的 Font Awesome 副本，请检查您是否已移动了使用所需图标所需的所有文件。此外，请仔细检查 HTML 的
<head>中这些文件的路径。
救命！我无法定位单个图层！
请确保您使用了正确的自定义属性值。此外，请确保您没有定义可能会覆盖其他内容的自定义属性（检查内联和自定义 CSS）。我们不建议编写自定义 CSS 来定位特定类或伪元素，因为 Font Awesome 的 Web 字体和 SVG 版本之间存在一些差异，这可能会使此操作变得很困难。
我可以将其他 Font Awesome 样式与双色调图标一起使用吗
如果你使用的是 SVG + JS 版本的 Font Awesome，我们的 强力转换 和 分层 让你可以做一些非常棒的事情。你也可以使用 大小调整、固定宽度图标 和 动画 等功能，在双色调图标中也一样。
双色调图标是否适用于所有浏览器？
双色调图标在所有现代网络浏览器中都能很好地渲染。由于 Internet Explorer 10 和 11 版本不支持 CSS 自定义属性，因此双色调图标仍将在该浏览器中渲染，但你无法为单个图层定义颜色或不透明度。如果你必须支持该过时的浏览器，我们建议你改为在图标或其父元素上定义颜色。