html - Replace text with icon with css -


i want use font awesome icons markup automatically generated , cannot change that.

the following markup display ol list. want replace numbers 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 i'm trying:

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

problem:

with above code, can display icons in each list item, numbers there. want hide numbers. have tried using text-indent, removes icons also.

just use

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

here's working fiddle

or:

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

here's working fiddle


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -