使用 css hover 更改 Zurb Foundation 6.3 中 Font Awesome 图标的颜色

Question

我想更改 Zurb Foundation 6.3 页面上堆叠的 Font Awesome 社交图标（即图标位于圆圈顶部）中圆圈的颜色，使用 hover 属性从灰色变为红色颜色。

我研究了不同的解决方案，但没有任何效果。 （我知道你不能指定 inline-block 属性来对齐图标，因为它使 hover 属性无法工作，所以我使用了 ul 和 li 标签。）

问题是因为我在 Foundation 而不是 Bootstrap 中使用 Font Awesome 吗？我找不到这方面的任何文件；我认为它将与 Foundation 一起使用。任何帮助将不胜感激。

谢谢， 史蒂夫·J。

这是我的代码：

CSS：

.social fa-circle {
color: #808080;
}

.social fa-circle:hover {
color: #990000;
}

HTML：

<div class="row">
    <div class="small-12 columns social">
        <ul>
            <li>
                <a href="#" class="">
                    <span class="fa-stack fa-lg">
                        <i class="fa fa-circle fa-stack-2x style="color: gray;"></i>
                        <i class="fa fa-facebook fa-fw fa-stack-1x fa-inverse" 
            style="font-size: 1.2rem;" aria-hidden="true"></i>
                    </span>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="fa-stack fa-lg">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-instagram fa-fw fa-stack-1x fa-inverse" style="font-size: 1.25rem;" aria-hidden="true"></i>
                    </span>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="fa-stack fa-lg">
                        <i class="fa fa-circle fa-stack-2x" ></i>
                        <i class="fa fa-envelope-o fa-fw fa-stack-1x fa-inverse" style="font-size: 1.2rem;" aria-hidden="true"></i>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>

Answer 1

我认为问题在于您缺少 fa 课程的时间段。试试：

.social .fa-circle {
color: #808080;
}

.social .fa-circle:hover {
color: #990000;
}