Flexslider SCSS overwrite the Arrows with an Iconfont

.flexslider {
  .flex-direction-nav a {
    display: block;
  }
  &:hover {
  .flex-next {
    opacity: 1;
    right: 5px;
    right: -36px;
  }
  .flex-prev {
    opacity: 1;
    left: 5px;
    left: -36px;
   }
  }
.flex-next,
.flex-prev { font-size: 1px; &:before { display: inline-block; font-family: 'font awesome'; content:"\24"; color: white; font-size: 40px; padding-left: 10px; } } .flex-prev { transform: rotate(180deg) ; -webkit-transform: rotate(180deg) ; -moz-transform: rotate(180deg) ; -o-transform: rotate(180deg) ; -ms-transform: rotate(180deg) ; } .flex-direction-nav a { width: 30px; height: 30px; margin: 0; display: block; background: none; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: inherit; opacity: 1; -webkit-transition: all .3s ease; } }