Question

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

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

问题是因为我在Foundation而不是Bootstrap中使用Font Awesome？我找不到任何关于此的文件;我认为它可以与基金会合作。任何帮助将不胜感激。

谢谢，史蒂夫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;
}

用css悬停改变Zurb Foundation 6.3中Font Awesome图标的颜色

1 个答案: