Place FA icons above link title

[Paul]

What would be the cleanest CSS to place FA icons above the menu link title (BuddyPanel)?

Thanks,
Paul.

[Alyssa]

@style960 to verify I understand correctly can you tell me the div id or class you are talking about, and you want it ABOVE the title? Do you have a mockup of how you want it to clarify further?

[Paul]

@tjchester

This would be for any menu assigned to BuddyPanel. I’m struggling to find the correct class.

Something like this I’m thinking:
http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2012/09/image3.jpg

[Alyssa]

@style960 this is the element you want to edit:
.menu-panel #nav-menu > ul > li.menu-item-9:before{font: normal normal normal 14px/1 FontAwesome;content: '';}

Just change the menu item number and place the FA content into the content. Don’t forget to size it using font-size.

[Paul]

@tjchester I see. I was wondering about the font size part. Excellent thanks 🙂

[Paul]

@tjchester Just tried this but it actually didn’t effect any change at all?

[Alyssa]

@style960 did you add a FA hex icon code to the content field?

[Paul]

@tjchester I did yeah…

[Alyssa]

@style960 got a link?

[Jan]

Hi,
is there also a css code to place fa-external-link icon before every link in blog content and bp content?

Would be vry nice 😉

Thanks Jan

[Alyssa]

@style960 so uh…my code was invalid. Try fixed code above.

[Alyssa]

@photofly add this to custom.css:

a[href*="//"]:not([href*="mysite.com"])::before {
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f08e';
}

You can also change ::before to ::after
NOTE: Make sure to change mysite.com (excluding http:// is important)

[Jan]

perfect, thanks a lot!

[Paul]

@tjchester Still no different for me. I’ll PM you the site…

[Jan]

hi,

only works with externel links for me..
is there also a possibility for internal links.