10

我想为自动生成的标记使用字体真棒图标，我无法更改它。

以下标记将显示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，但这也会删除图标。

4

4 回答 4

22

只需使用

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

这是一个工作小提琴

或者：

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

这是一个工作小提琴

于 2013-10-07T07:09:08.317 回答
3

编辑：我想我真的误解了你的要求，但如果有人想知道如何摆脱ol数字并用图标替换它们，这里有一个解决方案。

基本上，我摆脱了list-style-type: none;附加到li元素的列表编号。ol然后我在去掉默认值后明确地在左边添加了一个边距。最后，我将图标从页面流中取出，并以负边距将它们向左移动，因为这不依赖于边界框定位。作为旁注，我使line-height每个列表项的 与图标的 相同，font-size以便列表项适当地间隔开。

CSS：

.flex-control-nav {
    padding: 0;
    margin: 0;
    margin-left: 40px;
}
.flex-control-nav li  {
    line-height: 30px;
    list-style-type: none;
}
.flex-control-nav li:before  { 
    font-family: FontAwesome; 
    font-size: 30px;
    position: absolute;
    margin-left: -30px;
    content: '\f137';
}

JSBin 在这里。

于 2013-10-07T07:21:25.583 回答
0 

.flex-control-nav a  { 
  font-size: 30px; 
  display: inline-block; 
  text-indent: -999em;
}
.flex-control-nav a:after  { 
  font-family: "FontAwesome"; 
  display: block; 
  content: "\f137";
  text-indent: 0;
}
/* -- Change colour of active item -- */
.flex-control-nav a.flex-active:after  { 
  color: red;
}
/* -- Remove numbers from ol -- */
.flex-control-nav li  {
    list-style-type: none;
}
<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>

于 2016-02-27T00:30:10.207 回答
0

确保使用现代 fontawesome 字体系列。此示例是 IE11 的媒体断点。它删除锚中的文本并用 fa 图标替换它。

@media all and (-ms-high-contrast: active) and (max-width: 767.98px),
       all and (-ms-high-contrast: none) and (max-width: 767.98px) {

  .nav-pills > .nav-item > .someAnchortag {
    font-size: 0 !important;
  }
  .nav-pills > .nav-item > .someAnchortag:before {
    content: "\f00b";
    font-family: 'Font Awesome 5 Pro'!important;
    font-size: 0.8rem !important;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    padding: 0 2px 1px 0;
    background-color: rgb(168, 224, 38);
  }
}
于 2019-10-25T19:09:04.987 回答