Jump to content


Photo
- - - - -

Use Font Awesome as list-style-type


Best Answer Danny , 16 April 2013 - 11:13 AM

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;}
Go to the full post


  • Please log in to reply
4 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 16 April 2013 - 10:21 AM

Hi,

 

I would like to use font awesome icons in for my menu list at the bottom of this page: 

Please Login or Register to see this Hidden Content

 

I used this CSS:

Please Login or Register to see this Hidden Content

The only thing I found about this was this document, but I don't know if I have to do something with it: 

Please Login or Register to see this Hidden Content

 

Hope somebody can help me.

 

Kind regards,

 

Willem



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 April 2013 - 10:41 AM

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 -

Please Login or Register to see this Hidden Content



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 16 April 2013 - 10:44 AM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 April 2013 - 11:13 AM   Best Answer

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)

Please Login or Register to see this Hidden Content


  • Willem-Siebe Spoelstra likes this

#5 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 16 April 2013 - 11:19 AM

Yeahhhhhhhhh! :-)

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

 

Kind regards,

 

Willem