 <p>I had the same issue. The arrows were displayed as in your screenshot no matter where I placed the font files. I even tried absolute links á la "src:url('d:/myProject/fonts/flexslider-icon.eot');" and it still didn't work. I think it has something to do </p> <p>with the font itself. </p> <p>But good news: I used the following workaround: </p> <p>I'm using font Arial and the two symbols "&lt;" and ">". </p> <p>You have to adjust the file flexslider.css the following way: </p> <p>This line: </p> <pre><code>.flex-direction-nav a:before { font-family:"flexslider-icon"; font-size: 40px; line-height:1; display: inline-block; content:'\f001'; } </code></pre> <p>has to be replaced by the following one: </p> <pre><code>.flex-direction-nav a:before { font-family:"Arial"; font-size: 40px; line-height:1; display: inline-block; content:'&lt;'; } </code></pre> <p>And this line: </p> <pre><code>.flex-direction-nav a.flex-next:before { content:'\f002'; } </code></pre> <p>has to be replaced by the following one: </p> <pre><code>.flex-direction-nav a.flex-next:before { content:'&gt;'; } </code></pre> <p>Hope this helps. Cheers, Michael</p>