Jump to content
Willem-Siebe Spoelstra

Use Font Awesome as list-style-type

Recommended Posts

Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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;}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Yeahhhhhhhhh! :-)

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

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

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


×