Jump to content

Sackville - Change Social Link Icon Header and Footer

Recommended Posts

Site URL: http://loveandacupuncture.ca

Looking to swap the "link" icon in the social links in header and footer for a "phone" icon, as this link is for a phone number.  I think this is where it is. 

perhaps there is a "phone-icon" i could use in the place of "url-icon"?

<a class="icon icon--fill" href="tel:250-703-3772" target="_blank" aria-label="URL">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#url-icon" width="110" height="110"></use>
                        </svg>
                      </a>

<svg viewBox="23 23 64 64">
                          <use xlink:href="#url-icon" width="110" height="110"></use>
                        </svg>

password for site is "love"

Link to comment
  • Replies 7
  • Created
  • Last Reply
On 5/3/2020 at 4:40 AM, loveandacupuncture said:

love

Add to Home > Design > Custom CSS

a.icon.icon--fill[href*="tel"] svg {
    visibility: hidden;
}
a.icon.icon--fill[href*="tel"] {
    background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
    background-size: contain;
}

Replace above icon url with your phone icon url

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
On 5/5/2020 at 5:22 AM, tuanphan said:

Add to Home > Design > Custom CSS


a.icon.icon--fill[href*="tel"] svg {
    visibility: hidden;
}
a.icon.icon--fill[href*="tel"] {
    background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
    background-size: contain;
}

Replace above icon url with your phone icon url

Thank you very much!

This is great. Works perfectly.  Only glitch is I need a white icon..... so.....

Assuming I can swap 

https://image.flaticon.com/icons/svg/1034/1034131.svg

for another image of a white version of this icon?

There is no longer a password on the site.

Also, the size parameter....  It's a bit bigger than the other icons.  What is "contain" dictating regarding size?  Can this be made to match the others?  However, the size is of lower priority than white.

Thanks again.

Link to comment
14 hours ago, loveandacupuncture said:

Thank you very much!

This is great. Works perfectly.  Only glitch is I need a white icon..... so.....

Assuming I can swap 


https://image.flaticon.com/icons/svg/1034/1034131.svg

for another image of a white version of this icon?

There is no longer a password on the site.

Also, the size parameter....  It's a bit bigger than the other icons.  What is "contain" dictating regarding size?  Can this be made to match the others?  However, the size is of lower priority than white.

Thanks again.

You can replace with another icons. or download svg > change color > upload to your site

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
  • 3 weeks later...
On 5/13/2020 at 1:05 AM, tuanphan said:

You can replace with another icons. or download svg > change color > upload to your site

Thank you very much.

 

Is there a way to use a different icon file for the desktop and mobile layouts?  The desktop requires a white one, and the mobile requires a black one...

 

Thanks very much!

Link to comment
On 5/29/2020 at 10:35 AM, loveandacupuncture said:

Thank you very much.

 

Is there a way to use a different icon file for the desktop and mobile layouts?  The desktop requires a white one, and the mobile requires a black one...

 

Thanks very much!

above code for desktop, to apply on mobile, use this code

@media screen and (max-width:767px) {
a.icon.icon--fill[href*="tel"] svg {
    visibility: hidden;
}
a.icon.icon--fill[href*="tel"] {
    background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
    background-size: contain;
}
}

replace with mobile icon url

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.