Use FontAwesome or Glyphicons with css :before

Question

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>

Since `:before` is a pseudo element, you can't have `html` content, only `text`. — Torsten Walter, Aug 09 '12 at 00:40
Hi tig, just checking if my answer was sufficient. Hope it helped. Thanks! — keithwyland, Aug 15 '12 at 19:57
You really should accept wylander's answer. It totally does what I need, which seems to be what you wanted, too! — Matthew Schinckel, Dec 07 '12 at 02:12

score 161 · Accepted Answer · edited Sep 01 '16 at 15:55

161

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

edited Sep 01 '16 at 15:55

Nathan Strutz

8,095
1
37
48

answered Aug 12 '12 at 04:14

keithwyland

2,998
1
17
22

20

Here you can find all content icon codes `"\xxxx";` : http://astronautweb.co/snippet/font-awesome/ – miro marchi Feb 25 '14 at 10:57
1

@miromarchi That's a nice list all in one spot! Thanks for sharing! Also, if you go to the font awesome website that lists the icons (http://fortawesome.github.io/Font-Awesome/icons/) and click on one of the icons, the page has the Unicode towards the top, which is the same number used in the content property. – keithwyland Feb 25 '14 at 14:40
Is it possible to use unicode values of icons? \2022 ---> what format is this? – ratata Feb 02 '15 at 20:35
2

@ratata The \2022 format I believe is the hexadecimal representation of unicode. See this question and answer for more info: http://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value – keithwyland Feb 03 '15 at 15:53
if you're using the *SVG-with-JS* approach: read my answer on how that works .. or @ https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js – flowtron Jul 29 '19 at 10:45
Had to fumble around a bit to figure out how to actually put this into practice... what I ended up with have a "callout" css class: https://gist.github.com/AlecBenzer/7d894a03e493a4b7908b38f6684d95cd – alecbz Apr 29 '20 at 23:23

score 4 · Answer 2 · answered Oct 18 '16 at 12:30

@keithwyland answer is great. Here's a SCSS mixin:

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

Usage:

@include font-awesome("\f054");

score 0 · Answer 3 · answered Sep 05 '12 at 21:40

In the case of your list items there is a little CSS you can use to achieve the desired effect.

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

I have tested this in Safari on OS X.

score 0 · Answer 4 · answered Jan 21 '16 at 14:42

This approach should be avoided. The default value for vertical-align is baseline. Changing the font-family of only the pseudo element will result in elements with differing fonts. Different fonts can have different font metrics and different baselines. In order for different baselines to align, the overall height of the element would have to increase. See this effect in action.

It is always better to have one element per font icon.

flowtron · Answer 5 · 2019-09-09T10:23:47.467

The accepted answer (as of 2019 JULY 29) is only still valid if you have not started using the more recent SVG-with-JS approach of FontAwesome. In which case you need to follow the instructions on their CSS Pseudo-Elements HowTo. Basically there are three things to watch out for:

place the data-attribute on the SCRIPT-Tag "data-search-pseudo-elements" loading the fontawesome.min.js
make the pseudo-element itself have display:none
proper font-family & font-weight combination for the icon you need: "Font Awesome 5 Free" and 300 (fal/light), 400 (far/regular) or 900 (fas/solid)

score -1 · Answer 6 · answered May 19 '14 at 22:45

This is the easiest way to do what you are trying to do:

http://jsfiddle.net/ZEDHT/

<style>
 ul {
   list-style-type: none;
 }
</style>

<ul class="icons">
 <li><i class="fa fa-bomb"></i> Lists</li>
 <li><i class="fa fa-bomb"></i> Buttons</li>
 <li><i class="fa fa-bomb"></i> Button groups</li>
 <li><i class="fa fa-bomb"></i> Navigation</li>
 <li><i class="fa fa-bomb"></i> Prepended form inputs</li>
</ul>

score -1 · Answer 7 · answered Feb 18 '15 at 17:42

-1

Re: using icon in :before – recent Font Awesome builds include the .fa-icon() mixin for SASS and LESS. This will automatically include the font-family as well as some rendering tweaks (e.g. -webkit-font-smoothing). Thus you can do, e.g.:

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}

answered Feb 18 '15 at 17:42

Charley

71
1
6

Just a brief reminder that font awesome also provides variables to use as content so that one can also use: .pseudo-class:before { @include fa-icon(); content: $fa-var-phone-square; } – Jan Aug 11 '16 at 18:38

score -14 · Answer 8 · answered Jul 26 '13 at 19:11

-14

<ul class="icons-ul">
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
</ul>

All the font awesome icons comes default with Bootstrap.

answered Jul 26 '13 at 19:11

Thanushka

227
3
5

1

since when? bootstrap comes with glyphicons, not with fontawesome. – Rafael Herscovici Oct 24 '13 at 08:20

Use FontAwesome or Glyphicons with css :before

8 Answers8

Linked

Related