StevenPDX Posted September 14, 2021 Share Posted September 14, 2021 Site URL: https://bdze.squarespace.com/ Hello: I want to add a phone icon next to our telephone number in the menu. I searched the web and found some code (please see below) and inserted it into my Custom CSS (I'm using 7.1). All I get is a square. This is a first for me--I've never used Fontawesome and don't have a login (not sure if I need a membership, which I don't want to pay for a single icon). I tried substituting some other codes for icons in Helvetica but again...just the square before the phone number. Any idea how to add that icon? I'd sure appreciate some guidance. Many thanks, Steven .header-nav-item:nth-child(4) a::before { content: '\f095'; font-family: FontAwesome; display: inline-block; padding-right: 9px; } Link to comment
ShortAngryViking Posted September 15, 2021 Share Posted September 15, 2021 is this what you art after? Using CSS Copy the entire font-awesome directory into your project. In the <head> of your html, reference the location to your font-awesome.min.css. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> Check out the examples to start using Font Awesome! Link to comment
StevenPDX Posted September 15, 2021 Author Share Posted September 15, 2021 Thanks so much for replying. Pardon these silly questions: - How would I copy the entire font-awesome directory in the project? I haven't downloaded anything from FA - How do I access HTML in Squarespace? All I see is the ability to add custom CSS? Thanks for your help! Link to comment
ShortAngryViking Posted September 15, 2021 Share Posted September 15, 2021 someone with far greater experience will guide you through you questions. If no-one responds today I will tag help for you Link to comment
tuanphan Posted September 15, 2021 Share Posted September 15, 2021 Step 1. + If your site is Business Plan or higher, add this to Settings > Advanced > Code Injection > Header <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> + If your site is Personal Plan, edit Site Footer >> Add a Code Block under "OR CB.." text >> paste this code <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> Step 2. Remove this code .header-nav-item:nth-child(4) a::before { content: '\f095'; font-family: FontAwesome; display: inline-block; padding-right: 9px; } Step 3. Add this to Design > Custom CSS header#header [href*="tel"]:before { content: "\f095"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 9px; } If it doesn't work, please keep Step 1 code. Then let me know. We can check it again easier. Lalat 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
ShortAngryViking Posted September 15, 2021 Share Posted September 15, 2021 Thank You @tuanphan I am trying to add in markdown block 4 icons as links to my phone / email / google maps etc so I can follow steps: 1 (business plan), and Step 3? or is the code above site specific? www.studiolucephoto.com/book-1 thank you Link to comment
StevenPDX Posted September 15, 2021 Author Share Posted September 15, 2021 Thank you, @tuanphan! That worked perfectly. I'm so used to coding websites from scratch that it takes a while to find the equivalent functionality in Squarespace. I see that adding the stylesheet reference HTML in the Code Injection section and then the CSS reference in the the Design section makes perfect sense. The phone icon is now showing. Your instructions were perfect. Thank you again! Steven Link to comment
tuanphan Posted September 16, 2021 Share Posted September 16, 2021 On 9/15/2021 at 10:50 AM, ShortAngryViking said: Thank You @tuanphan I am trying to add in markdown block 4 icons as links to my phone / email / google maps etc so I can follow steps: 1 (business plan), and Step 3? or is the code above site specific? www.studiolucephoto.com/book-1 thank you If you add code in Markdown Block, follow Step 1 then next, add this syntax Quote <a href="tel:0123456789"><i class="fas fa-phone"></i> Enter phone number here</a> <a href="mailto:abc@abc.xyz"><i class="fas fa-envelope"></i> abc@abc.xyz</a> Reference: https://fontawesome.com/v5.15/icons/envelope?style=solid https://fontawesome.com/v5.15/icons/phone?style=solid You can enter phone, email, maps into search to find icon syntax. 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
ShortAngryViking Posted September 16, 2021 Share Posted September 16, 2021 Thank You @tuanphan that worked an absolute treat. Is there a way I can put spaces between the linked icons to add some space? https://www.studiolucephoto.com/book I was trying to open the google link in a new tab if at all possible Link to comment
ShortAngryViking Posted September 16, 2021 Share Posted September 16, 2021 for anyone else that stumbles across this tread here is the solution Link to comment
tuanphan Posted September 19, 2021 Share Posted September 19, 2021 On 9/17/2021 at 5:51 AM, ShortAngryViking said: Thank You @tuanphan that worked an absolute treat. Is there a way I can put spaces between the linked icons to add some space? https://www.studiolucephoto.com/book I was trying to open the google link in a new tab if at all possible Do you still need help or fixed? ShortAngryViking 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
ShortAngryViking Posted September 20, 2021 Share Posted September 20, 2021 (edited) 1 hour ago, tuanphan said: Do you still need help or fixed? still need a little help. Is there a way to have a space between the tree icons, so they are not so close together? Edited September 20, 2021 by ShortAngryViking Link to comment
tuanphan Posted September 21, 2021 Share Posted September 21, 2021 On 9/20/2021 at 7:25 AM, ShortAngryViking said: still need a little help. Is there a way to have a space between the tree icons, so they are not so close together? Add to Design > Custom CSS /* Icons spacing */ div#block-yui_3_17_2_1_1631831565740_5635 .fas { margin-left: 20px; margin-right: 20px; } ShortAngryViking 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
ShortAngryViking Posted September 21, 2021 Share Posted September 21, 2021 Thank you very much @tuanphan works great 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