vnh97 Posted February 21 Share Posted February 21 Hi, if someone could please guide me on how to add a phone icon before the number in the button of the header that would be greatly appreciated. Website URL: https://www.melbrosplumbing.com.au/ Screenshots: Below is a screenshot of where I would like to add the phone icon on the header button. I also don't seem to have Custom Files under the CSS Editor (I am on the business plan) that might help me with this...unless there is some other way I can do this Thanks in advance! Link to comment
Solution tuanphan Posted February 21 Solution Share Posted February 21 (1) First, use this code to Website > Website Tools > Code Injection > Header (this is FontAwesome icon) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> (2) Next, use this code to Website Tools > Custom CSS a.btn:before { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: bold; } (3) Result (on my test site) 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
vnh97 Posted February 22 Author Share Posted February 22 (edited) This worked! Thank you so much for your help!! Edited February 22 by vnh97 tuanphan 1 Link to comment
glshuman Posted March 1 Share Posted March 1 Does this dial the number with the phone icon button is clicked? Is there a way (code, block or integration) to activate a phone call by clicking on a button or text box with the number either displayed or hidden. Link to comment
creedon Posted March 1 Share Posted March 1 12 minutes ago, glshuman said: Does this dial the number with the phone icon button is clicked? Is there a way (code, block or integration) to activate a phone call by clicking on a button or text box with the number either displayed or hidden. There are two questions here. The phone icon discussed previously is just a visual element added with some CSS to help the site visitor to know they are clicking on a link that can dial a phone number. Almost any place in Squarespace where you can add a link or URL, you can use a URL of the format tel:+1234567890 What happens on a user's browser when a telephone URL is clicked depends on the browser and how the operating system is set up. That part is out of the site's/your control. On a mobile device like a smartphone almost certainly things have been configured to launch your phone app to make the call. On a computer it's probably a bit more uncertain what might happen. It could be nothing to an app launches to handle the call. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
glshuman Posted March 2 Share Posted March 2 Wow, thanks Creedon! That is so simple and basic even. I'm obviously on the learning curve here. creedon 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