• Register

Solution:

You have to include this css class .icon { color: inherit; } and include the class icon to the element like

<i class="icon fa fa-amazon" aria-hidden="true"></i>.

Execute the below code:

* {
  text-align: center;
  color: rgb(50, 185, 176);
  font-size: 1.03em;
}

.middlered * {
  color: rgba(211, 0, 0, 0.938);
}

/* FOLLOWING LINE IS THE PROBLEM? */

.btn:hover {
  color: white;
}

.icon {
  color: inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="row gallery">
    <div class="column">
        <div class="card border-0">
            <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a>
            <div class="card-body">
                <h5 class="card-title">SOME INFO</h5>
                <p class="card-text">SOME MORE INFO.</p>
                
                <!-- FOLLOWING LINE IS THE PROBLEM?  -->
                
                <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="icon fa fa-amazon" aria-hidden="true"></i></a>
                
            </div>
        </div>
    </div>
</div>

Or, you could include  .btn:hover i after .btn:hover, for the CSS code to alter the icon color to white

Follw the below code:

* {
  text-align: center;
  color: rgb(50, 185, 176);
  font-size: 1.03em;
}

.middlered * {
  color: rgba(211, 0, 0, 0.938);
}


/* FOLLOWING LINE IS THE PROBLEM? */

.btn:hover, /* remove the space between .btn and :hover */
.btn:hover i { /* Add this line to change the color of the icon as well */
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="row gallery">
  <div class="column">
    <div class="card border-0">
      <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla"></a>
      <div class="card-body">
        <h5 class="card-title">SOME INFO</h5>
        <p class="card-text">SOME MORE INFO.</p>

        <!-- FOLLOWING LINE IS THE PROBLEM?  -->

        <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a>

      </div>
    </div>
  </div>
</div>

Hopefully, follwing this way you are able to solve this problem.

posted Jul 2 in html 17,260 points