title: Flexslider arrows bugged, how to fix it?
body: <p>I'm having some problems with flexslider, the arrows for navigation is not displaying properly. I've tryed to edit the "flexslider.css" but got no success, any clue to fix this issue? (Look the picture, my browser [Chrome] is showing this fonts instead of a image, on IE It's only a link in an invisible block). [Ps: I'm using Bootstrap.]</p>
  
  <p>(Ps²: I'm trying to put a image in the arrow spot so I can make it look like this: <code>(http://cleancanvas.herokuapp.com/)</code></p>
  
  <p>([<strong>Edit</strong>] Ps³:Just to be clear... my arrows <strong>isn't</strong> showing up, how do I fix it? I've tried to put this code around the line 52 where the tutorial that the guy posted in the comment below said <code>background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;</code> but it wont work. The "fonts" "fl" and "fi" (see the image) still in that place :(</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="flexslider"&gt;
      &lt;ul class="slides"&gt;
          &lt;li&gt;
              &lt;img src="http://placehold.it/1600x500"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placehold.it/1600x500"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placehold.it/1600x500"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flexslider {
      margin-top:90px;
      max-height:450px;
      border:0;
      border-radius:0px;
      overflow:hidden;
  }
  
  .flex-control-nav {
      top:400px;
      opacity:0.5;
      filter:alpha(opacity=0.5);
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(window).load(function() {
      $('.flexslider').flexslider({
          animation: "slide",
          easing: "linear",
          useCSS: false,
          pauseOnHover: true,
          slideshowSpeed: 7500,
          animationSpeed: 750,
      });
  });
  </code></pre>
  
  <p><strong>Image</strong>: <a href="http://i.imgur.com/3jHfbAd.png" rel="nofollow">here</a></p>