出于某种原因，我无法更改 fontawesome 图标颜色

Question

我在 header:

中正确调用了 fontawesome

<link rel="stylesheet" href="css/fontawesome-all.min.css">

还有底部：

<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>

这是我的 HTML:

         <div class="socials">  
            <a href="#"><i class="fas fa-envelope"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter-square"></i></a>
            <a href="#"><i class="fab fa-github-square"></i></a>

        </div>

这是我的 style/sass:

.socials{     
    a{  
        margin-left: 1em; 
        fill: pink; 
        transition: .3s;
        font-size: 4em;

        &:hover{
            color: red;
            background-color: blue;
        }
    }
}

我可以更改 font-size 和边距。但是由于某种原因，我无法更改颜色。我看到可能有一个实例，我使用了 SVG 版本，而 fill 属性是应该使用的，但仍然无济于事。

Answer 1

如果that's你想要，那么问题是你使用了方形图标。

<div class="socials">
    <a href="#"><i class="fas fa-envelope"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
</div>
.socials {
a {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    font-size: 4rem;
    transition: 0.3s;
    background: transparent;
    text-align: center;
    line-height: 6rem;

    &:hover {
        color: red;
        background: blue;
    }
}

}

出于某种原因，我无法更改 fontawesome 图标颜色

For some reason, I can't change fontawesome icon colors

font-awesome