引导 fa 活动颜色答案

【问题标题】：bootstrap fa active color引导 fa 活动颜色
【发布时间】：2014-09-12 15:45:10
【问题描述】：

如何将带有 fa 的 i 的 active-color 设置为 #9b0722？

我的 HTML 如下所示：

<div class="topbar">
    <div class="container">
        <!-- Topbar Navigation -->
        <ul class="loginbar pull-right">
            <li class="active">
                <a href="#" title="Startseite">
                    <i class="fa fa-home"></i>  
                </a>

            </li>
            <li class="topbar-devider"></li>   
            <li><a href="#kontakt">Kontakt</a></li> 
            <li class="topbar-devider"></li> 
            <li><i class="fa fa-phone"></i><a href="tel:+497147273729"> +49 7147 273729</a></li> 
            <li class="topbar-devider"></li>   
            <li><a href="#">Impressum</a></li>   
        </ul>
        <!-- End Topbar Navigation -->
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap font-awesome

【解决方案1】：

就这么简单：

i.fa{color:#9b0722}

如果你的意思是悬停，那么

i.fa:hover{color:#9b0722}

【讨论】：

【解决方案2】：

假设您的意思是在图标悬停时更改图标的颜色，请将图标放在锚点内。

例如：

<li>
    <a href="#"><i class="fa fa-phone"></i> +49 7147 273729</a>
</li>

然后在您的 CSS 中，您可以像这样在悬停时更改颜色：

a:hover i.fa {
    color:#9b0722;
}

【讨论】：