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

OR：

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

这是Working Fiddle

Answer 2

编辑：我认为我真的误解了你的要求，但是如果有人想知道如何摆脱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 here.

Answer 3

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

Answer 4

确保使用现代的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);
  }
}

用css替换带有图标的文本

4 个答案: