Replace text with icon with css

Just use

.flex-control-nav a
{
    font-size:0;
}

Here's a Working Fiddle

OR:

.flex-control-nav a
{
    visibility: hidden;
}
.flex-control-nav a:before
{
    visibility: visible;
}

Here's a Working Fiddle

EDIT: I think I really misunderstood what you were asking for, but in case someone wanted to know how to get rid of the ol numbers and replace them with the icons, here's a solution.

Basically, I got rid of the list numbers with list-style-type: none; attached to the li elements. Then I explicitly added a margin to the left of the ol after getting rid of its default one. Finally, I took the icons out of the flow of the page and moved them left with a negative margin since that doesn't rely on bounding box positioning. As a side note, I made the line-height of each of the list items the same as the font-size of the icons so that the list items would be spaced apart appropriately.

CSS:

.flex-control-nav {
    padding: 0;
    margin: 0;
    margin-left: 40px;
}
.flex-control-nav li  {
    line-height: 30px;
    list-style-type: none;
}
.flex-control-nav li:before  { 
    font-family: FontAwesome; 
    font-size: 30px;
    position: absolute;
    margin-left: -30px;
    content: '\f137';
}

JSBin here.