Awesome Font Icons for Navigation Menu

Site URL: https://harp-roadrunner-6sxc.squarespace.com/

Password: 123456

I have read a few articles for inserting Awesome Font icons to my navigation menu. However, I want to add different icons to each item in the dropdown folders, and I couldn't figure out the code to recognize them. 

I want different icons for "Powerful Clinical Skills", "Simplified Patient Rehab", etc. 

Any ideas? 

15 hours ago, ChiroUp said:

Site URL: https://harp-roadrunner-6sxc.squarespace.com/

Password: 123456

I have read a few articles for inserting Awesome Font icons to my navigation menu. However, I want to add different icons to each item in the dropdown folders, and I couldn't figure out the code to recognize them. 

I want different icons for "Powerful Clinical Skills", "Simplified Patient Rehab", etc. 

Any ideas? 

Look like you 've already import fontawesome

You can try adding to Home > Design > Custom Css

.header-nav-item.header-nav-item--folder a.header-nav-folder-title:after {
  content: '\f0d7';
}

the content value you can get from fontawesome

Let me know how it works on your site

Here is my testing 

On 12/4/2021 at 3:34 AM, bangank36 said:

Here is my testing 

So I want to add different icons before each item in the folder. Not the names of the folder if that makes sense. So each of these 4 in the dropdown would have a different icon. (Picture attached) So I need to target each one in the dropdown individually. 

@ChiroUp Use this CSS.

/* Solutions Folder */
a.header-nav-folder-title[href="/solutions"]+div div:nth-child(1) a:before {
    content: "\f26e";
    font-weight: bold;
    padding-right: 5px;
    font-family: 'FontAwesome';
}
a.header-nav-folder-title[href="/solutions"]+div div:nth-child(2) a:before {
    content: "\f1fa";
    font-weight: bold;
    padding-right: 5px;
    font-family: 'FontAwesome';
}

Repeat similar for other items. Because you declared FontAwesome 4.5 version, so see icon & code here: http://swwwitch.com/dl/Font-Awesome-Cheetsheet-4.5.0.pdf