Jump to content


Photo
- - - - -

Font awesome list code that worked

Font awesome Font awesome list

  • Please log in to reply
4 replies to this topic

#1 surefoot

surefoot

    Newbie

  • 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>
    </ul>

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

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>
</ul>
Custom css file:
#site .the-icons {
    margin-left: 0;
    list-style: none;
    }



#2 Danny

Danny

    Is Awesome!

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

Posted 18 June 2014 - 10:13 AM

Hi,

 

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

  • webmktco and jmad like this

#3 webmktco†

webmktco

    Super Member

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

Posted 24 March 2015 - 07:33 PM

Danny,

 

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.

 

Thanks!


  • zephyr11 likes this

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 19801 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.



#5 webmktco†

webmktco

    Super Member

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

Posted 05 April 2015 - 07:32 PM

Danny,

 

OK- not the developer docs. What do you call the tutorial/FAQ/instructions? 
 

I reference these two: 

http://docs.pageline.../using-sections

http://themes.pageli...labels-badges/ 

 

What would recommend for reference? Something that has all the info for DMS... a single source.







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