Jump to content

Awesome Font Icons for Navigation Menu

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.1e204b10d137952e8ebd4b1825127b4f.png

Let me know how it works on your site

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Here is my testing 

image.thumb.png.0df0ddd74575b2dd3e9f1c9a72f1d8c3.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Here is my testing 

image.thumb.png.0df0ddd74575b2dd3e9f1c9a72f1d8c3.png

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. 

Screen Shot 2021-12-06 at 10.05.58 AM.png

Link to comment

@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

image.thumb.png.9e0366e4be677c7690e2d37866426af0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.