Flexslider arrows not displayed properly

The arrow, which is a font, is too large for its container.

Just add this CSS, it will reduce the size of the font, and in turn, fix the cut off issue.

.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 35px;
    display: inline-block;
    content: '\F001';
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

Add this into your CSS and it will override the default settings for flexslider

You can also add line-height to solve it:

.flex-direction-nav a  {
    line-height: 40px;
}

PS: It seems like a Flexslider bug, that it does not work properly with default settings.

Remove overflow: hidden; from .flex-direction-nav a:

.flex-direction-nav a  { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; z-index: 10; 
    overflow: hidden; /* Remove this line */
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0,0,0,0.8); 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
}

If you need to alter or remove the text that shows up by default for 'Previous' and 'Next', consult the options documentation 'Tailor to Your Needs' for the plugin here: http://www.woothemes.com/flexslider/

Following that, just update the settings for:

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item