Change font-awesome icon color when mouse over

Question

I have icons inside the input text box. when mouse over the icons I want to change the color of icons.and I tried but that won't work.

Below my code.

<div class="row">
        <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px; color: black"></span>
        <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px; color: black"></span>
        <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px; color: black"></span>
        <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px; color: black"></span>
        <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa />
    </div>

I need solution for that problem.

Answer 1

Your use of inline styles means that you have to use !important to override the default state of black :

 span:hover { color: green !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="row"> <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px; color: black"></span> <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px; color: black"></span> <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px; color: black"></span> <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px; color: black"></span> <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa /> </div> 

A better solution might look something like this:

 .fa { position: absolute; top: 10px; color: black; } .fa:nth-child(1) { left: -5px; } .fa:nth-child(2) { left: 20px; } .fa:nth-child(3) { left: 42px; } .fa:nth-child(4) { left: 65px; } .fa:hover { color: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <div class="row"> <span class="fa fa-envelope"></span> <span class="fa fa-file"></span> <span class="fa fa-calendar"></span> <span class="fa fa-bar-chart"></span> <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa" /> </div> 

Answer 2

I'd rather suggest removing the inline color: black and replace it with css styles. Avoid using !important when you can, right?

 .fa{ color: black } .fa:hover{ color:blue; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> <div class="row"> <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px;"></span> <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px;"></span> <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px;"></span> <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px;"></span> <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa /> </div>