Replace text with css icon

Question

I want to use awesome font icons for layout, which is automatically generated, and I can’t change it.

The following markup will display a list ol. I want to replace numbers with 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 is what I am trying:

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

Problem:

Using the code above, I can display the icons in each element of the list, however, there are also numbers. I want to hide the numbers. I tried to use text-indent, but it also removes the icons.

Answer 1

Just use

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

Here is the working script

OR

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

Here is the working script

Answer 2

EDIT: , , , - , ol , .

, list-style-type: none;, li. ol , . , , . line-height , font-size , .

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 .

Answer 3

.flex-control-nav a  { 
  font-size: 30px; 
  display: inline-block; 
  text-indent: -999em;
}
.flex-control-nav a:after  { 
  font-family: "FontAwesome"; 
  display: block; 
  content: "\f137";
  text-indent: 0;
}
/* -- Change colour of active item -- */
.flex-control-nav a.flex-active:after  { 
  color: red;
}
/* -- Remove numbers from ol -- */
.flex-control-nav li  {
    list-style-type: none;
}

<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>

Run codeHide result