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:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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.

score 265 · Accepted Answer · edited Dec 09 '18 at 22:13

265

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.

edited Dec 09 '18 at 22:13

yolenoyer

8,797
2
27
61

answered Oct 29 '13 at 11:18

Inluxc

2,722
1
12
4

20

A useful list of translations from these font-awesome icons to css values is here: http://astronautweb.co/snippet/font-awesome/ – Scott C Wilson Nov 01 '13 at 01:22
28

You'll want to include this to remove the default bullet points `ul { list-style-type: none; }` – Edd Mar 12 '14 at 14:22
Why is this methode not working when I have two list on the same page ? – dekajoo Jul 08 '14 at 21:51
6

Very nice, the only thing I would suggest to line things up nicer is to use `margin: 0 0.2em 0 -1.2em;` just increase/decrease the two values by the same amount to get the desired spacing. If you use a fixed pixel value that doesn't correspond properly to your font you'll notice a discrepancy on multiline list items. – braks Oct 28 '15 at 05:58
I added a ul prefix to this otherwise it would try to do it if the client used the cms to create an ordered (numbered) list – rtpHarry Nov 18 '18 at 14:46
This is good but any idea how to do this with js? I'm calling fontawsome like so: – Craig.C Apr 17 '20 at 19:13
For some reason when I try this the wording that follows is pushed to the line under the symbol. So only the symbol shows on the make line. Make sense? – Andrew Truckle Jun 28 '20 at 17:35
@AndrewTruckle You probably have a `display:block` applied to the text after the bullet. – Zemogle Sep 29 '20 at 10:22
For Font Awesome 5 the `font-family` should be updated to `font-family: 'Font Awesome 5 Free'` or whichever font family the icon is present in. See Font Awesome website for more details - https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements – Zemogle Sep 29 '20 at 10:24

lol · Answer 2 · 2018-06-07T01:42:06.843

168

The new fontawesome (version 4.0.3) makes this really easy to do. We simply use the following classes:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

As per this (new) url: http://fontawesome.io/examples/#list

edited Jun 07 '18 at 01:42

answered Jan 07 '14 at 04:36

lol

3,910
2
37
40

15

This should be the correct answer, with the new fa version. Very well done, thanks for this explanation. – David Apr 24 '14 at 20:15
26

I disagree, the question asked for a solution using a single list in pure CSS. This uses additional HTML, as well as classes. While this is definitely the way the FA docs specify to do this, it isn't technically the solution to the question, and isn't useful if you're looking to do this without modifying your HTML output. – Ryan Sep 01 '14 at 08:05
I know what you're going for - but people who aren't constantly writing pure CSS in situations where they can't modify their HTML???? (seriously, please look at changing your web framework) will need their google query memory refresher to link to the 'correct' font awesome docs way, juxtaposed with the 'actual' answer, next to each other to decide. I don't mean to say "there isn't just one correct answer to the problem" but there isn't... – lol Sep 01 '14 at 08:42
2

This approach doesn't work well with list elements wrapping to multiple lines, as identation on additional lines will not expand to include the width of the icon. – Lars Haugseth Jun 22 '15 at 10:26
2

Probably worth adding, with FA 4.3 (probably other versions too) and Bootstrap 3, the `ul` and `li` items need to be set `position: relative` since the `fa-li` item is positioned absolute. Otherwise, they will all float up to the top left. – Jeremy Harris Oct 15 '15 at 17:06
@lol I've updated the original question to emphasis the need for pure CSS. The text-editor in the CMS only outputs raw HTML. – BaronGrivet Nov 23 '15 at 21:27
@gwapedwink can you either update the version specificity if you're going to update the markup too? This answer is really directed at a specific version of Font Awesome. Alternatively, you could make a separate answer and then because it represents the (new) state of the art you could start earning the upvotes I no longer deserve ;-) – lol Jun 07 '18 at 01:52
Update the example url: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list – trank Nov 08 '19 at 10:51

score 16 · Answer 3 · answered Sep 01 '14 at 09:01

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 [] becomes \f058

score 4 · Answer 4 · answered Sep 17 '12 at 23:31

4

There's an example of how to use Font Awesome alongside an unordered list on their examples page.

<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>

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:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

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.

answered Sep 17 '12 at 23:31

cereallarceny

4,913
4
39
74

2

You don't need the extra markup: `li:before` can have a different font-family than the `li` itself. – cimmanon Sep 17 '12 at 23:48
@cimmanon: While you are indeed correct, the documentation for Font Awesome suggests you should have the extra markup. Technically it's not needed, however, I feel it may require some digging through the glyphs of the font to find out which key is mapped to which symbol. This would require some time and patience, but sure, you're solution would work as well. – cereallarceny Sep 17 '12 at 23:51
@cereallarceny - the problem we have is the HTML editor (TinyMCE) for the CMS produces the format I gave in my question. So from that perspective we don't have control over the list HTML. Unless we config TinyMCE to include the i element (and not delete it as an empty element). – BaronGrivet Sep 19 '12 at 01:19
So you don't have access to the HTML, do you have access to the CSS? – cereallarceny Sep 19 '12 at 01:21
Yes, complete access to the CSS. – BaronGrivet Sep 19 '12 at 04:54
Great, then you could always implement a `:before` pseudo element on each list item and append whatever character you need to before it. This is what @cimmanon was suggesting in the comments. – cereallarceny Sep 19 '12 at 05:51
Is it possible to assign a different font-family to a pseudo element compared to the font-family of the element it's attached to? – BaronGrivet Sep 19 '12 at 19:50
Absolutely. Just do it the way you would assign a font-family normally. Use this link as a reference: http://css-tricks.com/css-content/ – cereallarceny Sep 19 '12 at 20:02
I've updated it to reflect the fontawesome 4.0.3 properties and example url – lol Jan 06 '14 at 11:18

score 2 · Answer 5 · answered Sep 14 '19 at 13:05

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

In my case I had to use font family as 'Font Awesome 5 free' instead of 'FontAwesome' to make it work. Could be due to how Wordpress includes fontawesome fonts... — Ozgur Sar, Aug 15 '22 at 15:53

score 1 · Answer 6 · edited May 23 '17 at 10:31

@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:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Thanks.

score 0 · Answer 7 · answered Apr 10 '18 at 17:54

0

My solution using standard <ul> and <i> inside <li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

DEMO HERE

answered Apr 10 '18 at 17:54

Marco Allori

3,198
33
25

How is this any different from the other HTML only solutions that were added in 2012 and 2014? – Mike Poole Oct 25 '21 at 09:01

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

7 Answers7

Linked

Related