Html 用css用图标替换文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19218722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace text with icon with css
提问by user2738640
I want to use font awesome icons for a markup which is automatically generated and I cannot change that.
我想为自动生成的标记使用字体真棒图标，我无法更改它。
The following markup will display the ollist. I want to replacethe numbers with the icons.
以下标记将显示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>
Here's what I'm trying:
这是我正在尝试的：
.flex-control-nav a:before {
font-family: FontAwesome;
font-size: 30px;
display: inline-block;
content: '\f137';
}
Problem:
问题：
With the above code, I can display the icons in each list item, however the numbers are also there. I want to hide the numbers. I have tried using text-indent, but that removes the icons also.
使用上面的代码，我可以在每个列表项中显示图标，但是数字也在那里。我想隐藏数字。我曾尝试使用text-indent，但这也会删除图标。
回答by avrahamcool
Just use
只需使用
.flex-control-nav a
{
font-size:0;
}
Here's a Working Fiddle
这是一个工作小提琴
OR:
或者：
.flex-control-nav a
{
visibility: hidden;
}
.flex-control-nav a:before
{
visibility: visible;
}
Here's a Working Fiddle
这是一个工作小提琴
回答by jsea
EDIT: I think I really misunderstood what you were asking for, but in case someone wanted to know how to get rid of the olnumbers and replace them with the icons, here's a solution.
编辑：我想我真的误解了你的要求，但如果有人想知道如何摆脱ol数字并用图标替换它们，这里有一个解决方案。
Basically, I got rid of the list numbers with list-style-type: none;attached to the lielements. Then I explicitly added a margin to the left of the olafter getting rid of its default one. Finally, I took the icons out of the flow of the page and moved them left with a negative margin since that doesn't rely on bounding box positioning. As a side note, I made the line-heightof each of the list items the same as the font-sizeof the icons so that the list items would be spaced apart appropriately.
基本上，我摆脱了list-style-type: none;附加到li元素的列表编号。然后我ol在去掉默认的后显式地在左边添加了一个边距。最后，我将图标从页面流中取出，并以负边距向左移动它们，因为这不依赖于边界框定位。作为旁注，我使line-height每个列表项的 的 与font-size图标的 相同，以便列表项的间隔适当。
CSS:
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';
}
回答by Slavo
.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>回答by Gregory Bologna
Make sure to use the modern fontawesome font-family. This example is a media breakpoint for IE11. It removes the text in anchor and replaces it with fa icon.
确保使用现代 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);
}
}
