Using fonts Amazing bullet-shaped icons

Question

An example of using the awesome font is similar to this (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 is great for my purposes if the list items are 1 line. But if the elements of the list are multi-line, then the second line and then do not back off properly (by default).

It would be nice if these icons could be used as standard css-palettes, as in this way the multi-position will recede beautifully automatically.

Is there a simple and elegant way to do this? It would be great if I could use the markup as follows:

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

those. Reuse certain icon classes, but make them part of the li element.

Answer 1

Johan's answer is incorrect. Awesome Font uses web fonts, not a large background image!

It should be noted that you can just put the class in li tags, for example:

 <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 is one caveat, it will not work in ie7, even with the conditional line of ie7 styles. List items disappear just by leaving icons! If yours does not support ie7, then just leave the conditional style sheet, then at least those who, unfortunately, use ie7, will still be able to read your lists, without icons!

Hope this helps.

Answer 2

I know I'm late for the party, but I don’t think that any solution, even the one chosen, completely solves the problem. It is about solving a specific problem as accurately as possible.

According to the OP’s main question: “It would be nice if these icons could be used as standard css palettes, since in this way the multi-position will recede beautifully automatically.”

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

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

Demo

Some notes:

• You only need CSS for this solution, no extra markup needed

• This works with multi-line content, so if your content is wrapped in a second line or more, it will not be displayed in the icon / list element.

• There is no need to use additional markup, such as Font Awesome and Bootstrap, this is simply wrong, because we all know that we need to separate content from style from functionality. Adding extra markup to use the icons is obviously bloat code. My solution uses simple markup:

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

• Since I could not load the font, I used the symbol » as the value of content:'»' to illustrate the icon / list element. However, I left all the @font-face declarations so that everyone can use it and replace the path to the font file. For example:

   url("path/to/font-name.woff") format("woff"), 

• You may need to play with the field values ​​in li:before in order to correctly position the icon / list item, which you still have to do when using any of the above solutions or the FontAwesome and Bootstrap solutions.

Answer 3

Fashionably late ... remove the icon-ok class from li and set it in the list to use the icon as a bullet. Take the Unicode character from the Detailed Font Pages page for the icon. In this case, icon-ok was ported to icon-check in version 4. Unicode is the same as 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 the Awesome Font Icon for Marker Points with a Single List Item

Thanks to @armfoot for the inspector information. I added this screen shot explaining how to do this by clicking the ::before element in the DOM tree.

Answer 4

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 */ } 

Usually 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, this will not work ... Keep in mind that the Awesome font icons will NOT for some reason appear with a number of columns greater than 1. This is tested using Chrome, you will see a mismatch when switching -webkit-column -count: 2