Jump to content

- - - - -

Font awesome list code that worked

Font awesome Font awesome list

  • Please log in to reply
3 replies to this topic

#1 surefoot



  • Members
  • Pip
  • 4 posts
  • Framework Version:1.1.1
  • Country: Country Flag

Posted 18 June 2014 - 05:09 AM

The example on http://docs.pageline...ls/font-awesome asks to use the following code for a font-awesome list:

    <ul class="icons-ul">
    <li><i class="icon icon-li icon-ok"></i>Bulleted lists (like this one)</li>
    <li><i class="icon icon-li icon-ok"></i>Buttons</li>
    <li><i class="icon icon-li icon-ok"></i>Button groups</li>
    <li><i class="icon icon-li icon-ok"></i>Navigation</li>
    <li><i class="icon icon-li icon-ok"></i>Prepended form inputs</li>
    <li><i class="icon icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>

A forum topic http://forum.pagelin...st/#entry194781 suggests the following:
<ul class="the-icons">
     <li><i class="icon-backward"></i> icon-backward</li>
     <li><i class="icon-eject"></i> icon-eject</li>
     <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
     <li><i class="icon-fast-forward"></i> icon-fast-forward</li>

With #site .the-icons{...} in the custom css file.

But what worked for me is given below:

<ul class="the-icons">
     <li><i class="icon icon-backward"></i> icon-backward</li>
     <li><i class="icon icon-eject"></i> icon-eject</li>
     <li><i class="icon icon-fast-backward"></i> icon-fast-backward</li>
     <li><i class="icon icon-fast-forward"></i> icon-fast-forward</li>
Custom css file:
#site .the-icons {
    margin-left: 0;
    list-style: none;

#2 Danny


    Is Awesome!

  • Moderators
  • 19206 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 June 2014 - 10:13 AM



The documentation needs updating, as DMS now fully supports the latest version of Font Awesome. There is now no need to use custom CSS to create a list of icons via HTML, you can just copy and paste the code from the examples and it should work. For example:


<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</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>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>

  • webmktco and jmad like this

#3 webmktco†


    Super Member

  • DMS Subscriber†
  • 221 posts
  • Country: Country Flag

Posted 24 March 2015 - 07:33 PM



Can you note this in the documentation? I had to search for this to find a solution.  It would really help if you could include this in the developer docs.



  • zephyr11 likes this

#4 Danny


    Is Awesome!

  • Moderators
  • 19206 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 March 2015 - 08:03 AM

Not sure why this would need to be included in the Developer docs, as this isn't really related to developers. Also, there isn't any real need to include this documentation with our product when Font Awesome already has all this information on their website.

Also tagged with one or more of these keywords: Font awesome, Font awesome list