如何阻止图标在 Bootstrap 中改变颜色？

Question

我在 Bootstrap Jumbotron 中使用来自 fontawesome 的以下图标：

<a href="some-link">
    <i class="fab fa-github-square fa-3x"></i>
</a>

这会将徽标的颜色更改为蓝色（类似于超链接）。如何保留图标原来的颜色？

Answer 1

尝试给锚标记颜色属性。那应该工作。并且您可能需要将 a:hover 颜色更改为，这样当您将鼠标悬停在其上时，颜色将保持不变。

Answer 2

要删除 link 装饰，请在 link.

中使用 BS class text-decoration-none

.text-github{
  color: #495057;
}
.text-github:hover{
  color: #24292e;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<a href="some-link" class="text-decoration-none">
    <i class="fab fa-github-square fa-3x"></i>
</a>

<!-- Example with bootstrap color
But this is in 'a' element where you need to change color -->
<a href="some-link" class="text-decoration-none text-danger">
    <i class="fab fa-github-square fa-3x"></i>
</a>

<!-- Example with custom color
But this is in 'a' element where you need to change color -->
<a href="some-link" class="text-decoration-none text-github">
    <i class="fab fa-github-square fa-3x"></i>
</a>

您可以在 a 元素中设置您想要的颜色，因为 font-awesome 中没有真正的原生颜色。

更多信息文本格式：https://getbootstrap.com/docs/4.5/utilities/text/

更多信息文字颜色：https://getbootstrap.com/docs/4.5/utilities/colors/#color

Answer 3

如果你想要的颜色不在Bootstrap

通过写作风格，这很容易实现

添加一个class到<a>

<a href="some-link" class="logo">
    <i class="fab fa-github-square fa-3x"></i>
</a>

.logo, .logo:hover{
   color:#c9510c;
}

如何阻止图标在 Bootstrap 中改变颜色？

How to stop icon from changing color in Bootstrap?

html

css

font-awesome

bootstrap-4