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

【问题标题】：How to stop icon from changing color in Bootstrap?如何阻止图标在 Bootstrap 中改变颜色？
【发布时间】：2021-01-17 19:55:23
【问题描述】：

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

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

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

【问题讨论】：

更改锚标签的颜色。它也将应用于图标。
图标是字体的一部分，字体没有原生颜色。就像文本一样，图标继承了它的颜色。像更改任何其他文本一样更改其颜色。

标签： html css bootstrap-4 font-awesome

【解决方案1】：

要删除链接装饰，请在链接中使用 BS 类 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

【讨论】：

由于某种原因class="text-decoration-none" 不工作，但class="text-decoration-none text-github" 工作
那么你的问题解决了吗？ text-decoration-none 不设置颜色，悬停时只会删除所有行。第二类是给颜色的。

【解决方案2】：

如果你想要的颜色不在 Bootstrap 中

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

给<a>添加一个类

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

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

【讨论】：

【解决方案3】：

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

【讨论】：