Jump to content

Archived

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

jmad

Font Awesome List

Recommended Posts

jmad

When I try using the code here in a text box I get the icon but it also has a round bullet in front of the icon.  Does the documentation need updated or is there something about using this in a text box that requires special handling?

 

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

Share this post


Link to post
Share on other sites
Danny

You need to add the following CSS which is on our documentation:

 

http://docs.pagelines.com/tutorials/font-awesome

 

and use the following HTML

 

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I already had this in the text box.

 

<ul class="the-icons">
<li><i class="icon-li icon-phone"></i>573.445.1267</li>
 <li><i class="icon-li icon-mobile-phone"></i>913.302.2342</li>
 <li><i class="icon-li icon-envelope"></i><a style="font-size: .8em" href="mailto:cvittpiano@gmail.com?Subject=Hello%20Chris" target="_top">cvittpiano@gmail.com</a></li>
</ul>
 
And I already had this in the custom CSS
 
.the-icons {
      margin-left: 0;
      list-style: none;
}
 
With this I get a round bullet then the icon then the text.  The resolution to make it correct is to delete the <ul> tag from the item in the text box.   I think the documentation needs updated, is it possible that code works on just a WP page or posts but not in a text box as I indicated I was using?
 
 
 
 
 

Share this post


Link to post
Share on other sites
Danny

Can you provide a link so I can see the issue first hand please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

Please use the code example, I gave you. At the moment, you're using <ul> and no class associated to it. Using that method, will always give you bullets.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Sorry, I had to go back in and change the text box so it would display incorrectly and forgot to add the class.  I added the class back to the ul and already had the class in css.  Nothing seems to have changed.  

Share this post


Link to post
Share on other sites
Danny

Prefix your code with #site

 

so it looks like this:

 

#site .the-icons { ... }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

That works but using this method throws an extra line space into the top of the list so then my footer elements are no longer top aligned. 

Share this post


Link to post
Share on other sites
Danny

Right, so then remove the margin top that is added to all UL lists, by using the zmt class.

 

for example

 

<ul class="the-icons zmt">

<li>...</li>

</ul>


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×