Using Font Awesome icon for bullet points with a single list item element

Question

We d like to be able to use a Font Awesome   http   fortawesome github com Font-Awesome    icon as a bullet point for unordered lists in a CMS   The text editor on the CMS only outputs raw HTML so additional elements  classes cannot be added   This means displaying the icons when the mark up looks like this    lt ul gt   lt li gt Item 1 lt  li gt   lt li gt Item 2 lt  li gt   lt li gt Item 3 lt  li gt   lt  ul gt    The first problem I can see if Font Awesome requires a different font-family attribute  which would require a separate element   Is this possible using pure CSS  Or would I have to append the  element to the beginning of each list item using something like jQuery   I realise we can use a fall back of a background image  but it would be great to use Font Awesome if possible

User · Answer

The new fontawesome  version 4 0 3  makes this really easy to do  We simply use the following classes    lt ul class  fa-ul  gt     lt li gt  lt i class  fa-li fa fa-check-square  gt  lt  i gt List icons  like these  lt  li gt     lt li gt  lt i class  fa-li fa fa-check-square  gt  lt  i gt can be used lt  li gt     lt li gt  lt i class  fa-li fa fa-spinner fa-spin  gt  lt  i gt to replace lt  li gt     lt li gt  lt i class  fa-li fa fa-square  gt  lt  i gt default bullets in lists lt  li gt   lt  ul gt    As per this  new  url  http   fontawesome io examples  list

User · Answer

In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications   ul     list-style-type  none     li before     position  absolute    font-family   Font Awesome 5 free                 Use the Name of the Font Awesome free font  e g              -  Font Awesome 5 Free  for Regular and Solid symbols             -  Font Awesome 5 Brand  for Brands symbols             -  Font Awesome 5 Pro  for Regular and Solid symbols  Professional License                  content    f1fc      Unicode value of the icon to use       font-weight  900     This is important  change the value according to the font family name                        used above  See the link below       color  red      Without the correct font-weight  it will only show a blank square    https   fontawesome com how-to-use on-the-web advanced css-pseudo-elements define

User · Answer

My solution using standard  lt ul gt  and  lt i gt  inside  lt li gt      lt ul gt       lt li gt  lt i class  fab fa-cc-paypal  gt  lt  i gt   lt div gt Paypal lt  div gt  lt  li gt       lt li gt  lt i class  fab fa-cc-apple-pay  gt  lt  i gt   lt div gt Apple Pay lt  div gt  lt  li gt       lt li gt  lt i class  fab fa-cc-stripe  gt  lt  i gt   lt div gt Stripe lt  div gt  lt  li gt       lt li gt  lt i class  fab fa-cc-visa  gt  lt  i gt   lt div gt VISA lt  div gt  lt  li gt     lt  ul gt      DEMO HERE

User · Answer

There s an example of how to use Font Awesome alongside an unordered list on their examples page    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    If you can t find it working after trying this code then you re not including the library correctly   According to their website  you should include the libraries as such    lt link rel  stylesheet  href     css bootstrap css  gt   lt link rel  stylesheet  href     css font-awesome css  gt    Also check out the whimsical Chris Coyier s post on icon fonts on his website CSS Tricks   Here s a screencast by him as well talking about how to create your own icon font-face

User · Answer

Tama  you may want to check this answer  Using Font Awesome icons as bullets  Basically you can accomplish this by using only CSS without the need for the extra markup as suggested by FontAwesome and the other answers here   In other words  you can accomplish what you need using the same basic markup you mentioned in your initial post    lt ul gt     lt li gt     lt  li gt     lt li gt     lt  li gt     lt li gt     lt  li gt   lt  ul gt    Thanks

User · Answer

I d like to build upon some of the answers above and given elsewhere and suggest using absolute positioning along with the  before pseudo class  A lot of the examples above  and in similar questions  are utilizing custom HTML markup  including Font Awesome s method of handling  This goes against the original question  and isn t strictly necessary   DEMO HERE  ul     list-style-type  none    padding-left  20px     li     position  relative    padding-left  20px    margin-bottom  10px    li before     position  absolute    top  0    left  0    font-family  FontAwesome    content    f058     color  green      That s basically it  You can get the ISO value for use in CSS content on the Font Awesome cheatsheet  Simply use the last 4 alphanumerics prefixed with a backslash  So   amp  xf058   becomes  f058

User · Answer

Solution   http   jsfiddle net VR2hP   ul li before           font-family   FontAwesome       content    f067       margin 0 5px 0 -15px      color   f00      Here s a blog post which explains this technique in-depth

[css] Using Font Awesome icon for bullet points, with a single list item element

Examples related to css

Examples related to font-awesome