FP:Contact Icon Color

Hi,

How do i change the color of the icons in FP:Contact Widget.

Thank You.

Also if possible how do i make the email address as link to email rather than just being text.

Hello Owais,

1. Please try to use the following CSS code in order to change the color of the icons in Sydney FP: Contact widget.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

.widget_sydney_fp_contact_info div.fp-contact i {
    color: green;
}

You can use any other color or color code instead of green.

2. Please check this link:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

  1. Thank you for the code. I got the icon color i wanted.

  2. I tried the mailto links earlier also but when i enter it in the email field of contact widget it replaces it with just the text. Am i supposed to put it somewhere else?

Thank you

Roman,

One more thing. How to change the Icon for the address (Instead of the home icon i want the Map-marker).

Thank You.

Hello Owais,

1. You are welcome :slight_smile:

2. As far as I know, Sydney: Contact info widget should make mailto link automatically.

3. Please check the solution in this topic:

Kind Regards, Roman.

Hi Roman,

Please see the contact widget at the bottom on the following website
http://www.morabitobaking.com/

Thank You.

Hello Owais,

You can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your DashboardSettingsInsert Headers and Footers → add the following code to Scripts in Header section, and click Save button:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.widget_sydney_fp_contact_info div.fp-contact:nth-child(4) > span:nth-child(3)').html('<a href="mailto:customerservice@morabito.com">customerservice@morabito.com</a>');
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

I was able to make email as link using above code but the address icon didnot change.

Please advise.

Hi Roman,

Thank you for your help . I was able to tweek the above code to change the address icon by using the following code

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.widget_sydney_fp_contact_info div.fp-contact:nth-child(2) > span > i').attr('class', 'fa fa-map-marker');
    });
</script>

Thank You.

You are welcome Owais,

By the way, you can group it like this:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.widget_sydney_fp_contact_info div.fp-contact:nth-child(4) > span:nth-child(3)').html('<a href="mailto:customerservice@morabito.com">customerservice@morabito.com</a>');
        jQuery('.widget_sydney_fp_contact_info div.fp-contact:nth-child(2) > span > i').attr('class', 'fa fa-map-marker');
    });
</script>

Kind Regards, Roman.

Hi Roman,

Yes, i did group it . I Also made the phone number clickable.

Thank You.

You are welcome Owais,

And have a nice day :slight_smile:

Kind Regards, Roman.