用css替换带有图标的文本

Question

我想使用字体真棒图标作为自动生成的标记,我无法改变它.

以下标记将显示ol列表.我想用图标替换数字.

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

这是我正在尝试的:

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

问题:

使用上面的代码,我可以在每个列表项中显示图标,但数字也在那里.我想隐藏数字.我尝试过使用text-indent,但也删除了图标.

Answer 1

只是用

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

这是一个工作小提琴

要么:

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

这是一个工作小提琴