• 0
Sign in to follow this  
Followers 0

Font awesome list code that worked


Question

Posted · Report post

The example on http://docs.pagelines.com/tutorials/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.pagelines.com/topic/32814-font-awesome-list/#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;
    }

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

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>
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0