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
Post a Comment