CODEWITHSUNDEEP
htmlcssfont-awesome
user2738640
user2738640

Reputation: 1227

Replace text with icon with css

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

Answers (5)

Subhasish Nath
Subhasish Nath

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

Gregory Bologna
Gregory Bologna

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

Slavo
Slavo

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

jsea
jsea

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';
}

JSBin here.

Upvotes: 2

avrahamcool
avrahamcool

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

Related Questions