Jump to content

- - - - -

Font awesome list code that worked

Font awesome Font awesome list

  • Please log in to reply
1 reply 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
  • 18893 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>

  • jmad likes this

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