我想使用自動生成的標記字體真棒圖標，我不能改變這一點。

以下標記將顯示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';
}

問題:

使用上面的代碼，我可以顯示每個列表項中的圖標，但是數字也在那里。我想隱藏這些數字。我嘗試過使用文本縮進，但這也刪除了圖標。

# # #只需使用

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

這是一把能用的小提琴

或者:

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

這是一把能用的小提琴

# # #編輯:我想我真的誤解了你的要求，但如果有人想知道如何擺脫ol數字，并用圖標取代它們，這里有一個解決方案。

基本上我去掉了list-style-type的列表號:none附在李身上的元素。然后，在去掉了ol的默認頁邊空白后，我在它的左邊明確添加了一個頁邊空白。最后，我將圖標從頁面流中取出，并以負邊距向左移動，因為這不依賴于邊界框的定位。順便提一下，我將每個列表項的行高設置為與圖標的字體大小相同，這樣列表項就可以適當地分開。

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。

###

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

# # #確保使用現代的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);
  }
}

# # #我的有效解決方案:

.flex-control-nav a
{
    font-size:0;
}
.flex-control-nav li:nth-child(1) a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f39e';
}
.flex-control-nav li:nth-child(2) a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f0e1';
}
.flex-control-nav li:nth-child(3) a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f16d';
}
.flex-control-nav {
  list-style: none;
}

<ul class="flex-control-nav">
    <li><a class="">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>
</ul>