Using the Awesome Font Icon for Marker Points with a Single List Item

Question

We would like to use the Font Awesome badge ( http://fortawesome.github.com/Font-Awesome/ ) as a marker for unordered lists in the CMS.

The CMS text editor only displays the source HTML, so additional elements / classes cannot be added.

This means displaying the icons when the inscription looks like this:

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

The first problem I see if Font Awesome requires a different font-family attribute, which will require a separate element.

Is pure CSS possible? Or do I need to add an item to the top of each list item using something like jQuery?

I understand that we can use background rollback, but it would be great to use Font Awesome if possible.

Answer 1

Decision:

http://jsfiddle.net/VR2hP/

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

Here's a blog post that explains this technique comprehensively.

Answer 2

The new fontawesome (version 4.0.3) makes this really easy to do. We just 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> 

According to this (new) URL: http://fontawesome.io/examples/#list

Answer 3

I would like to dwell on some of the answers above and given elsewhere and suggest using absolute positioning along with : in front of a pseudo class . Many of the examples above (and on similar issues) use custom HTML markup, including the Awesome font handling method. This contradicts the original question and is not 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; } 

This is basically it. You can get the ISO value for use in CSS content in the Awesome cheatsheet font . Just use the last 4 alphanumeric with a backslash prefix. So, [] becomes \f058

Answer 4

Here's an example of how to use the Awesome font along with an unordered list on the 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 cannot find it workable after trying this code, then you do not think the library is correct. According to their website, you should include libraries as such:

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

Also check out Chris Coyier's fancy post on the iconic fonts on its CSS tricks website.

Here's a screencast on how to create your own font icon.

Answer 5

@Tama, you can check this answer: Using fonts Amazing markers

Basically, you can do this using only CSS without the need for additional markup, as suggested by FontAwesome, and other answers here.

In other words, you can accomplish what you need using the same basic markup that you indicated in your original post:

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

Thank.

Answer 6

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

Answer 7

I use http://icomoon.io/ It gives you the ability to download only the font icons you need. Select the icons you need, attach the key to the icon, and upload a small font, not the whole awesome font (which is still huge).

Here is my experiment: http://jsfiddle.net/Annett/ZB7TK/