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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.