如何阻止图标在引导程序中更改颜色

Question

我在Bootstrap Jumbotron中使用以下来自font真棒的图标：

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

这是将徽标的颜色更改为蓝色(如超链接(。如何保留图标的原始颜色？

Answer 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元素中设置你想要的颜色之后，因为字体中并没有真正的原生颜色。

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

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

Answer 2

尝试赋予锚点标记颜色属性。这应该行得通。您可能需要将：hover颜色更改为，这样当您将鼠标悬停在它上时，颜色将保持不变。

Answer 3

如果您想要的颜色不在引导中

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

将类添加到<a>

<a href="some-link" class="logo">
<i class="fab fa-github-square fa-3x"></i>
</a>
.logo, .logo:hover{
color:#c9510c;
}