如何更改 Vue 3 字体真棒图标的颜色？

Question

我使用的是 Vue 版本 3.2.1，并遵循了 https://github.com/FortAwesome/vue-fontawesome 上 Vue 3 的官方字体真棒文档以及此视频：https://www.youtube.com/watch?v=MoDIpTuRWfM

令人尴尬的是，我似乎无法更改图标的颜色，但我可以更改背景颜色（请参阅屏幕截图中的向上箭头）和不透明度（请参阅屏幕截图中的婴儿车）。

这是我的代码：

ma​​in.js：

// BEGIN font awesome icons, per https://github.com/FortAwesome/vue-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'

import { FontAwesomeIcon, fontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'  // OPTIMIZE THIS LATER
import { fab } from '@fortawesome/free-brands-svg-icons'  // OPTIMIZE THIS LATER
import { far } from '@fortawesome/free-regular-svg-icons'  // OPTIMIZE THIS LATER

import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver


library.add(fas, fab, far)

// END 字体真棒图标

和ReviewDetails.vue，展示了我能想到的所有尝试：

<div>
    <div style="color:red">
    <fa icon="broom" size="lg"/>
    </div>
    <fa icon="star" size="lg" style="color: var(--warning)" /> &nbsp;
    <span style="color: var(--warning)"> <fa :icon="['fas', 'question']" fill="color:red" size="lg"/></span> &nbsp;
    <fa icon="arrow-up" size="lg" style="background:MistyRose" /> &nbsp;
    <fa icon="heart" style="color: var(--warning)" size="lg" /> &nbsp;
    <fa icon="bone" style="color:#E1FF00" size="lg"/> &nbsp;
    <fa icon="arrow-alt-circle-down" style="fill:#E1FF00" size="lg"/> &nbsp;
    <fa icon="bomb" fill="#E1FF00" size="lg"/> &nbsp;
    <fa icon="baby-carriage" size="lg" style="opacity: 0.2; color: rgb(222, 226, 230)"/> &nbsp;
    <fa :icon="['far', 'star']" size="lg"  style="color: #E1FF00" />
</div>

这是上面代码产生的屏幕截图：

此外，没有专门针对图标的本地或全局 css，[更新] 但在浏览器中检查显示颜色由 ma​​in.css 中的以下内容控制（当我更改color: var(--primary); 下面到color: rgb(242, 114, 12); 例如，图标的颜色和大部分文字的变化）：

/* variables */
:root {
  --primary: rgb(33, 37, 41); /* was #4f515a; */
  --secondary: rgb(28, 117, 188); /* was #ebebeb; */
  --warning: #da0f41;
}

 * {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; 
  color: var(--primary);
  line-height: 1.40; 
  font-size: 1.07rem; 
  }

更新：我在 Firefox、Safari 和 Chrome 浏览器中测试了所有解决方案，问题是一致的。

谢谢！

Answer 1

如果你想使用纯CSS然后定位它，直接参考路径并设置填充颜色。 右键单击并使用控制台检查是定位元素的最佳方法，但为了更准确尝试

<fa icon="bomb" color="#E1FF00" id="my_bomb_icon" size="lg"/>

并在 css 中（如果内联颜色属性不起作用）添加

#my_bomb_icon path {
    fill: #E1FF00
}

或者，您可以尝试将颜色添加为直接属性，然后您将像这样创建图标 <fa color="red" icon="bomb"></fa>。另外，如果您需要特定颜色，请设置十六进制代码<fa color="#3caa0c" icon="bomb"></fa>

Answer 2

正如文档所说，您似乎输入了错误的样式参数

试试这个代码：

<fa :style="{color: 'white'}" icon="heart"></fa>

Answer 3

你试过stroke:

.fa-star {
  stroke: blue;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: blue;
  stroke-width: 30px;
}

或

<fa icon="star" size="lg" style="stroke:blue" />

注意：如果上述选项不起作用，请记住 FontAwesome 图标是 SVG，因此您需要参考该 SVG 的 fill 属性

.fa-star path {
  fill: blue;
}

Answer 4

正如您所说的color: var(--primary); 和--primary: rgb(33, 37, 41); 设置图标的颜色。我假设，你自己的颜色会被这个 css 属性覆盖。

您可以尝试使用CSS Specificity 归档您想要的内容。在您的情况下，您可以尝试使用您的 html：

<div id="main-div">
   <div class="wrapper-div" style="color:red">
      <fa class="red-icon" icon="broom" size="lg"/>
   </div>
</div>

在你的 css 中你可以这样定义：

#main-div .wrapper-div .red-icon {
   color: red;
}

如果这不起作用，可能是因为 class="" 未呈现，只需在浏览器中检查 <fa> 呈现的元素并确定其范围。