Sackville - Change Social Link Icon Header and Footer

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"

What is access password?

23 hours ago, tuanphan said:

What is access password?

love

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

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.

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

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!

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