Using Font Awesome icons as bullets

Question

An example use case of font awesome is like this (as taken from their examples):

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

This list renders fine for my purposes as long as the list items are 1 line. But if the list items are multi line then the 2nd line and further do not indent properly (by default).

It would be nice if these icons could be used as standard css bullets, since in this way multi line items would indent nicely automatically.

Is there an easy and elegant way to make this happen? It would be awesome if I could use mark-up like this:

<ul class="icon-bullets">
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

I.e. reuse the specific icon classes, but make them part of the li-element.

score 12 · Accepted Answer · answered Sep 26 '12 at 14:47

The answer by Johan is incorrect. Font Awesome uses web fonts, NOT a large background image!

It should be noted you can simply put the class onto the li tags, like so:

<ul>
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

However, there's one caveat, it won't work in ie7, even with the conditional ie7 stylesheet. The list items disappear, just leaving the icons! If your not supporting ie7, then simply leave out the conditional stylesheet, then at least those unfortunate enough to be using ie7 will still be able to read your lists, sans icons!

Hope this helps.

Thanks! I just tested in a stripped down environment (only Font Awesome css) and that renders fine indeed, including multi-line li's (that's where it broke down in my original environment). So the issue must have been caused by my css then. Thanks again. — rintcius, Sep 26 '12 at 22:40

score 12 · Answer 2 · answered Feb 11 '13 at 05:19

12

I know I'm late to the party, but I don't think any of the solutions, even the selected one, solves the problem completely. This is about solving the specific problem as accurately as possible.

According to the OP's core question: "It would be nice if these icons could be used as standard css bullets, since in this way multi line items would indent nicely automatically."

I had the same issue and here's how I solved it: add a padding-left: to the <ul>, then add a 'positive' margin-right: and negative margin-left: to the li:before.

What you'll see in the demo is basically this: margin:0 5px 0 -15px;.

DEMO

Some notes:

You will only need CSS for this solution, no need for any extra markup
This works with multi-line content, so if your content wraps to a second line or more, it will not appear under the icon/list item.
There is no need to use extra markup like Font Awesome and Bootstrap do it, that's just plain wrong because we all know we have to separate content from style from functionality. Adding extra markup for the sake of using icons is clearly code-bloat. My solution uses simple markup like so:
```
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
```
Since I wasn't able to load a font, I used the » character as the content:'»' value to illustrate the icon/list item . However, I did leave all the @font-face declaration so anyone can use it and replace the path to their font file. Like so:
```
url("path/to/font-name.woff") format("woff"),
```
You may need to play with the margin values in the li:before in order to position the icon/list-item properly, which you would have to do anyway when using any of the solutions above or FontAwesome's and Bootstrap's solutions.

answered Feb 11 '13 at 05:19

Ricardo Zea

10,053
13
76
79

I'm even later to the party, but is there a way to adapt this solution for right-aligned lists? With ::after and the margins swapped, single-line items look nice, but multi-line items have their list icon on the last row (obviously) instead of the first. :/ – pulsar Apr 03 '13 at 10:28
@pulsar, Do you have a demo or example page of your issue? Trying to replicate the problem to then solve it it's kind of counter intuitive :p. I just can't see where one would need to have a list right aligned... maybe because it's in a right-to-left reading language (Arabic, Hebrew, Chinese, Japanese)? – Ricardo Zea Apr 03 '13 at 14:22
Of course. The layout I was trying to create (I've since tried a different approach) looked kind of like this: http://jsfiddle.net/8fm9p/9/ (you might need to resize the browser window or else the columns will wrap) – The left column is right-aligned, the right column is left-aligned, so for symmetry the bullets should be on the right. – pulsar Apr 03 '13 at 17:35
1

I see. The fix was quite simple: Just add `position:relative;` to the `li`, and then `position:absolute; top:0;` to the `li::after`. Here's an updated fiddle: http://jsfiddle.net/8fm9p/10/. I gotta tell you, I personally don't agree with having the list items on the right; although your text/list is right-aligned, editorial-wise the bullets should remain in the same location, to the left. Text alignment shouldn't affect any editorial structure, like bullets/list items. – Ricardo Zea Apr 04 '13 at 05:07
I disagree. I think the visual cue a bullet icon provides _depends_ on its alignment (in one single, non-ragged row). If the bullet icon were on the ragged side of the text, it would be much harder to distinguish individual list items. In any case, your solution is great, I never thought about absolute positioning on the pseudo-element. Thanks! – pulsar Apr 04 '13 at 09:11
Doesn't work if you apply this class to many `ul` with different font sizes. – DickieBoy Feb 06 '14 at 15:43
True. I have to admit though, I have rarely (if ever) used two or more lists with different font sizes in the same site, yet I think it's fair use case. With that being said, I personally see the 'other' list(s) with different font size as variations of the "default" style. After all, their structure is the same, the 'only' different is the font size. (cont...) – Ricardo Zea Feb 07 '14 at 04:00
(...cont) Which means that if we were to consider the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) approach, then you could just add a 'modifier' class to the `
– Ricardo Zea Feb 07 '14 at 04:01

score 7 · Answer 3 · edited Jun 20 '20 at 09:12

7

Fashionably late... remove the class icon-ok from the li's and set the list to use an icon as the bullet. Grab the unicode character from the Font Awesome details page for the icon. In this case icon-ok has been migrated to icon-check in version 4. The unicode is the same f00c.

ul.ok {
    list-style-type: none;
    margin-left: 0;
    padding-left: 1em;
}

ul.ok li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
}


<ul class="ok">
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
</ul>

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

How to inspect icons for code

Thanks @armfoot for the inspector info. I've added this screenshot explaining how to do it, clicking on the ::before element in the DOM tree.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 03 '14 at 20:46

Dylan Valade

5,565
6
42
56

1

The newest answers are generally the most accurate ones. Cheers for the link as well! BTW, the icon codes can be seen directly in [their page](http://fortawesome.github.io/Font-Awesome/icons/) by right-clicking and inspecting - look at the *content* attribute in the CSS. – Armfoot Sep 17 '14 at 22:55
1

Awesome. Thanks. Pun intended. – Louise Eggleton Nov 14 '14 at 19:06
you don't need to use the inspector any more (not sure if you ever needed to), they display the unicode value right on [the icon's page](http://fortawesome.github.io/Font-Awesome/icon/bed/), so just click on the icon you want to use and read it off from there. – Woodrow Barlow Jul 15 '15 at 20:44

score 2 · Answer 4 · answered Jan 27 '15 at 18:24

For multi-column lists, I use this:

ul.twocolumn, ol.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 5px;
  -ms-column-count: 2;
  -ms-column-gap: 5px;
  -webkit-column-count: 2;
  -webkit-column-gap: 5px;
  column-count: 2;
  column-gap: 5px;
  list-style-position: inside; /* bugfix for hidden bullets/numbers */
}

Normally when you declare it:

<ul class="fa-ul twocolumn">
  <li><i class="fa-li fa fa-whatever-icon"></i> foo</li>
  <li><i class="fa-li fa fa-whatever-icon"></i> bar</li>
</ul>

However, it won't work… Be aware that Font Awesome icons will NOT, for some reason, appear with a column-count greater than 1. Tested this with Chrome you will see the disparity when you toggle -webkit-column-count: 2

score 0 · Answer 5 · answered Sep 14 '19 at 13:28

In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.

include link to Font Awesome:

<link rel="stylesheet" href="../css/fontawesome-all.min.css">

and I'll use html as follows without a separate class for ul and li for simplicity.

<ul>
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
    <li>Navigation</li>
    <li>Prepended form inputs</li>
</ul>

CSS

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

Using Font Awesome icons as bullets

5 Answers5