How to Add Font Awesome caret icon in navigation menu in genesis?


(Shashank Bhattarai) #1

I am trying to add caret font awesome (fa fa-caret-down & fa fa-caret-right) icon in navigation menu in genesis child theme like crunchify. I tried using css but its not working but i think there is a way down by injecting directly into functions.php. Look the image i uploaded Help pls.


(App Shah) #2

Hi Shashant -

Try adding fontawesome code directly. Please take a look at below image.


(Shashank Bhattarai) #3

Thanks man but are there any hooks ? that we can do directly though functions.php ? else we have to repeat same to all new menus we create :frowning


(Shashank Bhattarai) #4

What i have done so far is using css… take a look :slight_smile:

// For Parent Menus
.genesis-nav-menu .menu-item-has-children > a:after {
content: ‘\f0d7’;
font-family: ‘FontAwesome’;
padding-left: 7px;
font-size: 12px;
font-size: 0.9rem;
vertical-align: bottom;
}

// For Parent Childs
.genesis-nav-menu .menu-item-has-children ul li > a:before {
content: ‘\f0da’;
font-family: ‘FontAwesome’;
font-size: 12px;
padding-right:7px;
font-size: 0.9rem;
vertical-align: bottom;
}

its working fine but if we could hook it directly into the navigation anchor by using icon markup it would be more awesome :smiley:


(App Shah) #5

I doubt it. It may not be available.

You may try to add :before attribute… Here is a sample:

Step-1

Go to https://crunchify.com/about/. Checkout true mark for heading as below:

Step-2

This one was added using below CSS code:

.coolh3::before {
    content: "\f058";   // <===== you need to replace that with caret code.
    font-family: FontAwesome;
    margin-right: 20px;
    color: #dd7127;
}

Hope that works.

NOTE: this will add your font-awesome font for each menu item. You also need to find CSS property for it.


(Shashank Bhattarai) #6

yeah it worked alright ! One more thing, how did you added your logo via css ?.I tried but couldnt find the fix. Can you help ?


(Shashank Bhattarai) #7

Another thing too…!! I am not able to filter the way to ad adsense code in top of featured post in eleven40 homepage like in crunchify. Ad gets displayed grids too, but i want to show it only in top featured post in homepage below post title. Can you please give the idea :slight_smile:


Copyright © 2018 Crunchify, LLC.  •  WordPress Services  •  Contact  •  Hosted at DiscourseHosting.