Archived

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

  • 0

Use Font Awesome as list-style-type

Question

Posted · Report post

Hi,

 

I would like to use font awesome icons in for my menu list at the bottom of this page: http://oudisnieuw.net.websrv.makeweb.nl/.

 

I used this CSS:

#sb_footcols .footcol ul {
list-style-position: inside;
}

#sb_footcols .footcol ul li:before {
content: "f101"; 
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}

The only thing I found about this was this document, but I don't know if I have to do something with it: http://phpxref.pagelines.com/less/icons.less.source.txt

 

Hope somebody can help me.

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

You're using:

 

font-family: FontAwersome;

 

Try this instead:

 

font-family: PageLinesFont;

 

For example: (this code is an example and will most likely not work on your site)

#site .sidebar_widgets .menu li:before {
content: "f014";
padding-right: 12px;
font-family: PageLinesFont;}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Yeahhhhhhhhh! :-)

Really happy, it worked. Learned something new today!!

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Willem,

 

If you're using the Menu widget, add the icon code to your menu items Navigation Label in Appearance > Menus. Then it should appear on your menu, there isn't a need to use CSS.

 

Another method would be to use the Text Widget and use HTML code for your menus, see here for an example - http://support.pagelines.me/docs/miscellaneous/font-awesome/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

You are in fact right about that. I use that method for single menu items.

However, when I have a list that needs all the same icons, I have to put the icon code in every Nav. Label.

The normal list uses CSS for that because it needs only one line of CSS.

 

That's why I prefer to do it with CSS.

Any thoughts about why my CSS is not working. I read on the internet about the pseudo element 'before' to get the result I want, but on my website it is displaying something, but not the font-awesom icon.

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites