Sobreescribir Los Iconos De Flexslider Con Font Awesome

Una pequeña porción de código para sustituir los iconos por defecto que vienen con Flexslider usando Font Awesome.

// font stack
$FontAwesome: 'FontAwesome';

// colors
$orange: #ff6600;

// Include font Awesome
@font-face {
  font-family: "FontAwesome";
  src: url('fontawesome-webfont.eot');
  src: url('fontawesome-webfont.eot?#iefix') format('eot'), 
       url('fontawesome-webfont.woff') format('woff'), 
       url('fontawesome-webfont.ttf') format('truetype'), 
       url('fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
 
.flexslider  {
     .flex-direction-nav a {
          display: block;
     }
     &:hover {
          .next {
               opacity: 1;
               right: 10px;
          }
          .prev {
               opacity: 1;
               left: 10px;
          }
     }
     .next {
          font-size: 1px;
          &:before {
               display: inline-block;
               font-family: $FontAwesome;
               content:"\f054";
               color: $orange;
               font-size: 30px;
               padding-left: 10px;
          }
     }
     .prev {
          font-size: 1px;
          &:before {
               display: inline-block;
               font-family: $FontAwesome;
               content:"\f053";
               color: $orange;
               font-size: 30px;
               padding-left: 10px;
          }
     }
     .flex-direction-nav a {
          width: 30px;
          height: 30px;
          overflow: hidden;
          margin: 0;
          display: block;
          background: none;
          position: absolute;
          top: 90%;
          z-index: 10;
          cursor: pointer;
          text-indent: inherit;
          opacity: 1;
          -webkit-transition: all .3s ease;
     }
}