0

I've been struggling with this and it's not an easy thing to search for and find the answer to so hoping you guys can help.

I'm using a theme that has these icons surrounded by a circular border, and I want to be able to have classes for each with a different color. Just can't figure it out.

Here's the code, I put the -prefered in there but that doesn't seem to work.

/* Re-using Social Icons so need to Re-style them */
.thumb-info-badge-icons {
 border-top: 1px dotted #DDD;
 margin: 0;
 padding: 15px 10px;
 display: block;
}

.thumb-info-badge-icons a {
 background: #CCC;
 border-radius: 25px;
 display: inline-block;
 height: 30px;
 line-height: 30px;
 text-align: center;
 width: 30px;
}

.thumb-info-badge-icons a:hover {
 text-decoration: none;
}

.thumb-info-badge-icons a span {
 display: none;
}

.thumb-info-badge-icons a i {
 color: #FFF;
 font-size: 0.9em;
}

.thumb-info-badge-icons a {
 background-color: #2ea6c4;
}

.thumb-info-badge-icons-preferred a {
 background-color: #c42e2e;
}
<span class="thumb-info-badge-icons">
 <a href="#" data-toggle="tooltip" data-placement="top" title="Preferred Captain" class="thumb-info-badge-icons-preferred"><i class="fas fa-trophy"></i></a>
 <a href="#" data-toggle="tooltip" data-placement="top" title="Instant Scheduling"><i class="fas fa-bolt"></i><span>Twitter</span></a>
 <a href="#" data-toggle="tooltip" data-placement="top" title="100+ Five Star Reviews"><i class="fas fa-star"></i><span>Linkedin</span></a>           
</span>

And the CSS

Bryan
  • 77
  • 1
  • 6

1 Answers1

1

hey try your classes like this

a.thumb-info-badge-icons-preferred  {
background-color: #c42e2e;}

instead of 

.thumb-info-badge-icons-preferred a {
background-color: #c42e2e;

}

Haque
  • 175
  • 2
  • 12