tuanphan Posted June 10 Share Posted June 10 To add a phone icon before Button Block, you can follow these quick steps. If you can't make it work, you can share link to page where you use Button, I will check & give you exact code. #1. Add this code to Code Injection > Footer (If the site doesn't support Code Injection, you can add it to Code Block in Site Footer) <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. Install Squarespace ID Finder (free tool) https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en and find ID of Button Block In my example, we will have #block-yui_3_17_2_1_1718008089698_24121 #3. Use this code to Custom CSS box div#block-yui_3_17_2_1_1718008089698_24121 a:before { content: "\f2a0"; font-family: "Font Awesome 6 Free"; font-weight: bold; font-size: 20px; margin-right: 10px; display: inline-block; transform: rotate(-35deg); } #4. Result #5. Note I use Phone icon from FontAwesome: https://fontawesome.com/icons/phone-volume?f=classic&s=solid 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
tuanphan Posted August 26 Author Share Posted August 26 If you want to add Phone icon before Header button, replace #3 with this code a.btn:before { content: "\f2a0"; font-family: "Font Awesome 6 Free"; font-weight: bold; font-size: 20px; margin-right: 10px; display: inline-block; transform: rotate(-35deg); } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment