title: How to Change Prev/Next Arrows pictures in Owl Carousel?
body: <p>So instead of using the arrows owl has on their carousel I want to use an arrow I found. I set it as a background image but the arrows still remain grey and unchanged. Do I have to change something in the owl css? Also is there an easy way to make the arrows responsive by moving relative to the height of the page?</p>
  
  <pre><code>.icon-arrow-left {
      background-image: url("css/icon-arrow-left.png");
      background-repeat: no-repeat;
      height: 44px;
      width: 44px;
      margin-right: 8px;
  }
  .icon-arrow-left:hover {
      background-image: url("css/images/icon-arrow-left.png");
  }
  .icon-arrow-right {
      background-image: url("css/images/icon-arrow-left.png");
      background-repeat: no-repeat;
      height: 44px;
      width: 44px;
      margin-left: 8px;
  }
  .icon-arrow-right:hover {
      background-image: url("css/icon-arrow-left.png");
  }
  </code></pre>