title: Trying to change the font color of font awesome used in the navigation of Owl Carousel
body: <p>I'm using Owl carousel 2 and updated the prev and next buttons with icons from font awesome. I got everything to work, but I can't seem to figure out how to change the colors of the icons on roll over. </p>
  
  <p>css</p>
  
  <pre><code>.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
      background-color: $green;
  }
  
  .owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot {
          font-family: 'fontAwesome';
  }
  
  .owl-carousel .owl-nav .owl-prev:before{
      // fa-chevron-left
      content: "\f177";
      color: #D6D6D6;
      font-size: rem-calc(18);
  }
  
  .owl-carousel .owl-nav .owl-prev:before:hover{
      // fa-chevron-left
      color: $white !important;
      border: 1px solid red;
  }
  
  .owl-carousel .owl-nav .owl-next:after{
      //fa-chevron-right
      content: "\f178";
      color: #D6D6D6;
      font-size: rem-calc(18);
  }
  
  .owl-theme .owl-nav [class*=owl-]{
      background-color: $white;
      border: 1px solid #D6D6D6;
      padding: 5px 10px
  }
  
  .owl-theme .owl-nav [class*=owl-]:hover{
      background-color: #D6D6D6;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$('.owl-carousel').owlCarousel({
     loop:true,
     margin:10,
     nav:true,
     items: 1,
     navText : ["",""],
     rewindNav : true
  });
  </code></pre>