Replace text with icon with css

Question

I want to use font awesome icons for a markup which is automatically generated and I cannot change that.

The following markup will display the ol list. I want to replace the numbers with the icons.

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a class="">2</a></li>
    <li><a class="">3</a></li>
    <li><a class="">4</a></li>
    <li><a class="">5</a></li>
</ol>

Here's what I'm trying:

.flex-control-nav a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f137';
}

Problem:

With the above code, I can display the icons in each list item, however the numbers are also there. I want to hide the numbers. I have tried using text-indent, but that removes the icons also.

Answer 1

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

Answer 2

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.