Jump to content


This topic is now archived and is closed to further replies.


Font awesome list code that worked

Recommended Posts

surefoot    0

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>

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>

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;

Share this post

Link to post
Share on other sites
Danny    1,327



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>
  • Like 2

Please search our forums, before posting!

Share this post

Link to post
Share on other sites
webmktco+    21



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.



  • Like 1

Share this post

Link to post
Share on other sites
Danny    1,327

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.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • gregbroxton
      By gregbroxton+
      The Font Awesome 'Brand icons' do not render on the mobile version of this site.
      The other Font Awesome icons render fine, but the "Brand icons" do not render at all when viewed on mobile.
      Everything works normally when viewed on the PC.
      Any ideas why the brand icons will not render in the mobile version?
      The site is using DMS2 with all updates
    • bartoncollege
      By bartoncollege
      I was perusing the master list of Font Awesome icons at http://fortawesome.github.io/Font-Awesome/icons/ and noticed that there are many new ones that are not available in iBox's dropdown menu.  Will these be added in the next DMS update?
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • webmktco
      By webmktco+
      Website URL: http://www.schrumpfdds.com/
      Framework Version: DMS 1.1.9
      WordPress Version: 4.1.1
      I noticed that the Font Awesome version in my theme is 3.2.1.
      Can you tell me how I can update the FA version? Or is that not possible?
    • webmktco
      By webmktco+
      I can't get the Yelp icon to display.  It seems my development site has an older version of Font Awesome (according the FA developer).
      How can I update FA to the most recent version?
      WordPress Version
      Framework Version
      PHP Version