CODEWITHSUNDEEP
csstwitter-bootstrapfont-awesome
webtroll
webtroll

Reputation: 53

bootstrap fa active color

how can i set the active-color of a i with fa to #9b0722?

My HTML looks like the following:

<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>

Upvotes: 2

Views: 1975

Answers (2)

Devin
Devin

Reputation: 7720

As simple as this:

i.fa{color:#9b0722}

if you mean on hover, then 

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

Upvotes: 3

Brayden Williams
Brayden Williams

Reputation: 168

Assuming you mean changing the color of the icon when it's hovered, put the icon inside the anchor.

For example:

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

Then in your CSS then you can change the color when it's hovered like this:

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

Upvotes: 2

Related Questions