Reputation: 1227
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 ol
list. I want to replace the numbers with the icons.
<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.
Upvotes: 11
Views: 42000
Reputation: 133
My solution that works:
.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>
Live Example in codepen: https://codepen.io/subhasishnath45/pen/ZEmYoyz
Upvotes: 0
Reputation: 284
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.
@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);
}
}
Upvotes: 0
Reputation: 339
.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>
Upvotes: 0
Reputation: 4057
EDIT: I think I really misunderstood what you were asking for, but in case someone wanted to know how to get rid of the ol
numbers and replace them with the icons, here's a solution.
Basically, I got rid of the list numbers with list-style-type: none;
attached to the li
elements. Then I explicitly added a margin to the left of the ol
after 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-height
of each of the list items the same as the font-size
of the icons so that the list items would be spaced apart appropriately.
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';
}
Upvotes: 2
Reputation: 14094
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
Upvotes: 24