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  lt i class  icon-cut  gt  lt  i gt    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  lt i gt  as a list bullet   This works  but doesn t behave correctly for multi-line bullet items    lt ul class  icons  gt     lt li gt  lt i class  icon-ok  gt  lt  i gt  Lists lt  li gt     lt li gt  lt i class  icon-ok  gt  lt  i gt  Buttons lt  li gt     lt li gt  lt i class  icon-ok  gt  lt  i gt  Button groups lt  li gt     lt li gt  lt i class  icon-ok  gt  lt  i gt  Navigation lt  li gt     lt li gt  lt i class  icon-ok  gt  lt  i gt  Prepended form inputs lt  li gt   lt  ul gt

User · Answer

lt ul class  icons-ul  gt   lt li gt  lt i class  icon-play-sign  gt  lt  i gt   lt a gt option lt  a gt  lt  li gt   lt li gt  lt i class  icon-play-sign  gt  lt  i gt   lt a gt option lt  a gt  lt  li gt   lt li gt  lt i class  icon-play-sign  gt  lt  i gt   lt a gt option lt  a gt  lt  li gt   lt li gt  lt i class  icon-play-sign  gt  lt  i gt   lt a gt option lt  a gt  lt  li gt   lt li gt  lt i class  icon-play-sign  gt  lt  i gt   lt a gt option lt  a gt  lt  li gt   lt  ul gt    All the font awesome icons comes default with Bootstrap

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is the easiest way to do what you are trying to do   http   jsfiddle net ZEDHT    lt style gt   ul      list-style-type  none      lt  style gt    lt ul class  icons  gt    lt li gt  lt i class  fa fa-bomb  gt  lt  i gt  Lists lt  li gt    lt li gt  lt i class  fa fa-bomb  gt  lt  i gt  Buttons lt  li gt    lt li gt  lt i class  fa fa-bomb  gt  lt  i gt  Button groups lt  li gt    lt li gt  lt i class  fa fa-bomb  gt  lt  i gt  Navigation lt  li gt    lt li gt  lt i class  fa fa-bomb  gt  lt  i gt  Prepended form inputs lt  li gt   lt  ul gt

User · Answer

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

User · Answer

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

User · Answer

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  amp  font-weight combination for the icon you need   Font Awesome 5 Free  and 300  fal light   400  far regular  or 900  fas solid

[css] Use FontAwesome or Glyphicons with css :before

Examples related to css

Examples related to twitter-bootstrap

Examples related to font-awesome