ChiroUp Posted December 3, 2021 Posted December 3, 2021 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?
Beyondspace Posted December 4, 2021 Posted December 4, 2021 (edited) 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 Edited December 4, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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!
Beyondspace Posted December 4, 2021 Posted December 4, 2021 Here is my testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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!
ChiroUp Posted December 6, 2021 Author Posted December 6, 2021 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.
tuanphan Posted December 11, 2021 Posted December 11, 2021 @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 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment