michael2019 Posted January 16, 2021 Share Posted January 16, 2021 Site URL: https://www.fueldigitalmarketing.ca/contact Instead of writing the words phone or email I would like to add a phone and email icon. I don't want to use unicodes because they don't show up the same on all devices. I have heard of fontawesome or icon 8. There are lots of tips to add icons to a navigation bar but don't see anything for body content. Here is my site contact page: https://www.fueldigitalmarketing.ca/contact Thank you. Link to comment
tuanphan Posted January 18, 2021 Share Posted January 18, 2021 Step 1. Add this code to Code Injection > header <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Step 2. Let me know when you inserted, we can check code to add email/phone icons. michael2019 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
michael2019 Posted January 18, 2021 Author Share Posted January 18, 2021 Thank you for your help. Code has been updated. Link to comment
michael2019 Posted January 19, 2021 Author Share Posted January 19, 2021 Hi. I inserted the code provided above. Is there another step to follow? Your help is appreciated. Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 On 1/19/2021 at 9:26 PM, michael2019 said: Hi. I inserted the code provided above. Is there another step to follow? Your help is appreciated. Add to Design > Custom CSS div#block-f4ffb10b444f9c603fa1 p:nth-child(4):before { content: "\f095"; font-family: FontAwesome; padding-right: 5px; } div#block-f4ffb10b444f9c603fa1 p:nth-child(5):before { content: "\f0e0"; font-family: 'FontAwesome'; padding-right: 5px; } Reference https://fontawesome.com/v4.7.0/icon/envelope https://fontawesome.com/v4.7.0/icon/phone michael2019 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
michael2019 Posted January 20, 2021 Author Share Posted January 20, 2021 Thank you so much it worked. I checked FontAwesome's website and noticed they now on version 5. Do you know if there is there an updated code I can use to put in Code Injection > header? The code above is for 4.7.0. Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 (edited) They have released version 6. I like using ver 4.7. FA 5. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> FA5 - 4 use different syntax for icons. You can find ver 5. phone & email icons syntax here. https://fontawesome.com/icons with font-family, FA5 use "Font Awesome 5 Free" or "Font Awesome 5 Brand" or "Font Awesome 5 Brands" or "Font Awesome 5 Pro" Edited January 20, 2021 by tuanphan michael2019 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
michael2019 Posted January 20, 2021 Author Share Posted January 20, 2021 Thanks. Is there a reason you like ver 4.7 over ver5 or 6? Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 On 1/21/2021 at 2:10 AM, michael2019 said: Thanks. Is there a reason you like ver 4.7 over ver5 or 6? FA5 has put some free icons in FA4 into paid icons michael2019 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Spark_plugin Posted November 29, 2021 Share Posted November 29, 2021 Hey! I made a guide on how to add over 1600 icons to Squarespace, including a lot of different customization options. You can check out my free icon guide here. VelocityMarketingGroup, benja and tuanphan 2 1 - Rasmus Myhrberg, Maker of Spark Plugin Spark Plugin – Make Your Dream Website, with 100+ Customizations 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