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

Question

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

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

这是我的代码：

main.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 font awesome icons

和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，[更新] 但在浏览器中检查显示颜色由 main.css[ 中的以下内容控制=45=] （例如，当我将下面的 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

你尝试过 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的，所以你需要参考fill 属性那个 SVG

.fa-star path {
  fill: blue;
}

Answer 2

如果要纯CSS那就定位吧，直接引用路径，设置填充色即可。右键单击并使用控制台检查是定位元素的最佳方式，但为了更准确，请尝试

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

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

#my_bomb_icon path {
    fill: #E1FF00
}

Alternatively, you can try to add the color as a direct property, then you will create the icon like so <fa color="red" icon="bomb"></fa>. Also if you need a specific color then set the hex code <fa color="#3caa0c" icon="bomb"></fa>

Answer 3

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

试试这个代码：

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

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> 并确定范围。

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

How to change color of Vue 3 font awesome icon?

css

vue.js

font-awesome

vuejs3