用css替換帶有圖標的文本

我想爲自動生成的標記使用字體可怕的圖標，但我無法更改。用css替換帶有圖標的文本

以下標記將顯示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，但也刪除了圖標。

來源

2013-10-07 user2738640

只需使用

.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

來源

2013-10-07 07:09:08 avrahamcool

太謝謝你了:) – user2738640

請注意，編號（文本內容）仍然會佔用空間使用可見性時的文檔流：隱藏。 –

這就是爲什麼我更喜歡我的第一個答案。 – avrahamcool

編輯：我想我真的誤會你問的是什麼，但如果有的話e想知道如何擺脫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.

來源

2013-10-07 07:21:25 SombreErmine

我剛剛在編輯時發表評論..大聲笑。從我+1。 – avrahamcool

是啊，我就像是，「等一下......」謝謝，並且很抱歉讓每個人都感到困惑。：P – SombreErmine

.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-27 00:30:10 Slavo

用css替換帶有圖標的文本

回答

相關問題