html - 用 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;
}

这是一个 Working Fiddle

或者:

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

这是一个 Working Fiddle