Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use FontAwesome or Glyphicons with css :before

Is there any way to embed HTML in the css content: element when using a :before pseudo-element?

I want to use a Font Awesome (or Glyphicon) in a use case like this:

    h1:before {         content: "X";         padding-right: 10px;         padding-left: 10px;         color: @orangeLight;     } 

Where X is something like <i class="icon-cut"></i>.

I can, of course do this manually in HTML, but I really want to use :before in this case.

Similarly, is there any way to use <i> as a list bullet? This works, but doesn't behave correctly for multi-line bullet items:

<ul class="icons">   <li><i class="icon-ok"></i> Lists</li>   <li><i class="icon-ok"></i> Buttons</li>   <li><i class="icon-ok"></i> Button groups</li>   <li><i class="icon-ok"></i> Navigation</li>   <li><i class="icon-ok"></i> Prepended form inputs</li> </ul> 
like image 618
tig Avatar asked Aug 09 '12 00:08

tig


People also ask

How do I use Font Awesome icons in CSS before?

To use font awesome icons as CSS content code follow the below steps. Add a unique CSS class name to the icon element you want to use. Set the font-weight css property as 900 (For Solid), 400 (Regular or Brands), 300 (Light for pro icons). Set the content css property to the unicode value font awesome icon.

How do I give Font Awesome icons in CSS?

Add Icons to HTML We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use.

What is the difference between glyph icons and Font Awesome?

Font Awesome is a font and icon toolkit based on CSS and Less. Glyphicons are icon fonts which you can use in your web projects.


1 Answers

What you are describing is actually what FontAwesome is doing already. They apply the FontAwesome font-family to the ::before pseudo element of any element that has a class that starts with "icon-".

[class^="icon-"]:before, [class*=" icon-"]:before {   font-family: FontAwesome;   font-weight: normal;   font-style: normal;   display: inline-block;   text-decoration: inherit; } 

Then they use the pseudo element ::before to place the icon in the element with the class. I just went to http://fortawesome.github.com/Font-Awesome/ and inspected the code to find this:

.icon-cut:before {   content: "\f0c4"; } 

So if you are looking to add the icon again, you could use the ::after element to achieve this. Or for your second part of your question, you could use the ::after pseudo element to insert the bullet character to look like a list item. Then use absolute positioning to place it to the left, or something similar.

i:after{ content: '\2022';} 
like image 134
keithwyland Avatar answered Sep 21 '22 13:09

keithwyland