Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 12, 2014 at 12:25 am #290320
    akmhou

    Hi,

    In my sidebar navigation, I would like to add the “fa-arrow-right” icon to the left of each link. I used Firebug to identify the specific CSS (#top .widget_nav_menu li). Is that the right one to edit? Could you please tell me how to add the Font Awesome icon to the CSS?

    Also, I would like to add a title at the top which will be the parent page name. Preferably without a link and wrap it with an H3 tag.

    I’m making all CSS modifications using a child theme.

    Thanks for your help.

    July 14, 2014 at 4:18 pm #291128
    Yigit

    Hey akmhou!

    Please add following code to Functions.php file inside Appearance > Editor

    add_action( 'wp_enqueue_scripts', 'add_font_awesome' );
function add_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css', array(), '4.1.0' );
}

    It will add FontAwesome to your theme. Then add following code to Fuctions.php as well

    function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
	   jQuery("i.fa-arrow-right").prependTo(".nested_nav li");
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    If that does not work, please hire a freelancer

    Cheers!
    Yigit

    July 14, 2014 at 7:07 pm #291212
    akmhou

    Hi Yigit,

    Thanks a lot for your detailed instructions. I realize my customization may be outside the scope of standard support. I appreciate you going the extra step.

    I added your suggestions to my child theme’s functions.php but the Font Awesome icon doesn’t show.

    My next option is to create custom sidebars with custom widget areas then add the custom menu widget to each sidebar. I’ll try to add the icon using CSS Classes. I was hoping to avoid this manual process by using the built-in side navigation.

    I’ll get in touch with a developer/freelancer if I can’t solve my problem.

    Thanks

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Sidebar Navigation with Font Awesome Icon’ is closed to new replies.