Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Phone Icon in the Menu Bar


StevenPDX

Question

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

13 answers to this question

Recommended Posts

  • 0

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
  • 0

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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
  • 0
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:

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.

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
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

Screen Shot 2021-09-20 at 12.25.47.png

Add to Design > Custom CSS

/* Icons spacing */
div#block-yui_3_17_2_1_1631831565740_5635 .fas {
    margin-left: 20px;
    margin-right: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...