How to change color of a font-awesome icon inside a card on hover?

Question

I have a page with a lot of bootstrap cards. When I hover on the card, I want the icon color to be white rather than black. I tried different methods but I couldn't succeed. I added a class like .fa-calendar:hover, I tried with fa:hover but couldn't succeed

These is my codepen

https://codepen.io/anon/pen/EGOgMq

<section>
<div class="container">


        <div class="row mbr-justify-content-center">

            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-volume-up fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Stay <span>Successful</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-calendar fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Create
                            <span>An Effective Team</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-globe fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Launch
                            <span>A Unique Project</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-trophy fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Achieve <span>Your Targets</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>




        </div>

</div>

</section>

Answer 1

To be more specific you can hover over the class name. You need hover property and after that add the class name.

.wrap:hover .fa{
 color:#FFF;
}

Answer 2

If you want the color of all the icon to be same on hover then you can use the class name

Example:

.wrap:hover .fa{
  color:red;
  }

Else you can use id and then change the color

.wrap:hover #vol{
  color:red;
  }

Answer 3

This is because of the color you set for .mbr-iconfont

.mbr-iconfont {
  font-size: 4.5rem !important;
  color: #313131;
  margin: 1rem;
  padding-right: 1rem;
}

when you hover over each box, the main parent element which gets :hover is the .wrap class. you can't change color of .mbr-iconfont:hover because the user may hover on other parts of the box (eg. the text or title or margins...). So, you have to set your hover style for parent element .wrap as in following:

.wrap:hover .mbr-iconfont {
  color: #FFF;
}

Here is the updated Pen link