abc Posted September 17, 2023 Share Posted September 17, 2023 (edited) Is it possible to add a 'Font Awesome' icon or any custom icon next to the hamburger nav icon and link it to the search page? Like so: I already have Font Awesome set up on my website and would like to use this icon: <i class="fa-solid fa-magnifying-glass"></i> Website URL: https://steven.squarespace.com Thank you Edited September 17, 2023 by pro Link to comment
abc Posted September 19, 2023 Author Share Posted September 19, 2023 Hopefully somebody will be kind enough to help out with this. Link to comment
tuanphan Posted September 21, 2023 Share Posted September 21, 2023 This is FontAwesome 5 or 6. And have you declared FontAwesome Library link to Code Injection Header yet? 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
abc Posted September 22, 2023 Author Share Posted September 22, 2023 15 hours ago, tuanphan said: This is FontAwesome 5 or 6. And have you declared FontAwesome Library link to Code Injection Header yet? Hi Tuan, it's Font Awesome 6. And yes, I've already declared it in the header. Link to comment
Solution tuanphan Posted September 25, 2023 Solution Share Posted September 25, 2023 On 9/22/2023 at 7:12 AM, pro said: Hi Tuan, it's Font Awesome 6. And yes, I've already declared it in the header. Add to Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<a href="/search" class="custom-search"><i class="fa-solid fa-magnifying-glass"></i></a>').insertBefore('.header-burger'); }); </script> <style> a.custom-search { margin-right: 20px; display: inline-block; } </style> Lesum and abc 2 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
abc Posted September 25, 2023 Author Share Posted September 25, 2023 7 hours ago, tuanphan said: Add to Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<a href="/search" class="custom-search"><i class="fa-solid fa-magnifying-glass"></i></a>').insertBefore('.header-burger'); }); </script> <style> a.custom-search { margin-right: 20px; display: inline-block; } </style> Hi Tuan, thank you for the code. One slight visual issue though. It looks fine on desktop, but on mobile, the spacing is a little off. This is the original without the code: And this is with the code: Would it be possible to have it look as close to the original as possible? As always, thank you for your time. Link to comment
tuanphan Posted September 27, 2023 Share Posted September 27, 2023 Use this code under <style> @media screen and (max-width:767px) { .header-burger { left: -5vw !important; position: relative; } a.custom-search { position: relative; left: -3vw; } } </style> abc 1 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
abc Posted September 27, 2023 Author Share Posted September 27, 2023 40 minutes ago, tuanphan said: Use this code under <style> @media screen and (max-width:767px) { .header-burger { left: -5vw !important; position: relative; } a.custom-search { position: relative; left: -3vw; } } </style> Thank you, Tuan! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment