CODEWITHSUNDEEP
cssfont-awesome
Jericho
Jericho

Reputation: 10953

Font Awesome Icon with characters on it

I would like to have font awesome with charaters on it , but it fails to do that.Please help to understand whats going on wrong.

Output :

enter image description here

Code Tried :

<i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i>
<i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i>                                           
<i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i>

Upvotes: 2

Views: 11189

Answers (2)

nnikolay
nnikolay

Reputation: 1761

You can also define content as icon:

http://jsfiddle.net/tagliala/77re29ct/24/

.fa-a:before {
   font-family: Arial; /* your font family here! */
   font-weight: bold;
   content: 'A';
}
<span class="fa fa-a"></span><br/>

Upvotes: 2

Lee
Lee

Reputation: 4323

You shouldn't use Font Awesome, as this will only output icons using CSS content, and you can't put any HTML markup 'inside' them.

The best thing would just be to use span tags, and style them using CSS.

http://jsfiddle.net/7uevq7pu/

HTML:

<span class="red">XL</span>
<span class="yellow">S</span>
<span class="green">XXL</span>

CSS:

span { border-radius:5px;padding:0 5px;text-align:center; }
.red { background:red; }
.yellow {background:yellow; }
.green { background:green; }

Upvotes: 8

Related Questions