我想为自动生成的标记使用很棒的字体图标,我无法更改它。
以下标记将显示 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
,但这也删除了图标。
最佳答案
就用
.flex-control-nav a
{
font-size:0;
}
这是一个 Working Fiddle
或者:
.flex-control-nav a
{
visibility: hidden;
}
.flex-control-nav a:before
{
visibility: visible;
}
这是一个 Working Fiddle
关于html - 用 css 替换带有图标的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19218722/