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>
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.
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.
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.
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';}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With