Docs

[JS_Marketing16]

Hi,

I was following the thread at: https://community.theme.co/forums/topic/custom-social-media-icons-2/

It’s been archived, but I had one more question about changed the icon. I’ve successfully changed one of my icons replacing the behance icon. The only problem is when you hover your mouse on the text that shows still says behance.

How can I change this to either my own tag or to display nothing?

Thanks,
C

[JS_Marketing16]

Also, when you click the icon instead of going to jobscience.co.uk it goes to http://www.jobscience.com/jobscience.co.uk. How can I correct this?

Website is jobscience.com

[Joao]

Hi There,

Would you mind sharing the code you use to implement BeHance Icon?

Use the code tag above to wrap the code.

Thanks

Joao

[JS_Marketing16]

Hi,

Here’s the code I used. I figured out how to direct it to the proper URL but still having trouble changing the behance popover on hover.

.x-topbar .x-social-global .x-icon-behance-square:before {
content: “”;
}

i.x-icon-behance-square {
background: url(“http://www.jobscience.com/wp-content/uploads/2016/07/UK-Flag-Bigger.png”);
display: inline-block;
width: 18px;
height: 18px;
}

.x-social-global a i {
background-size : cover;
}

[Darshana]

Hi there,

To change the hover image, use the following CSS.

i.x-icon-behance-square:hover {
    background-image: url("path.to/your/image.png");
}

Hope that helps.

[JS_Marketing16]

Hi,

Thanks for the code, but I am actually trying to change the popover when you hover from Behance to say “Jobscience UK”

See screenshot attached.

Thanks,
Colton

[JS_Marketing16]

Sorry here’s the screenshot

[Lely]

Hi Colton,

Please do change the title parameter on the link you have added
<a href="https://www.jobscience.co.uk/" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>

Change this part: title="Behance" to this title="Jobscience UK"

Hope this helps.

[JS_Marketing16]

Hi,

I tried adding that code but it didn’t seem to affect anything. The code you provided I haven’t added in the first place.

The only code I’ve added was what I put above earlier in this thread. Is there a way to tweak this or to add single code to make the change?

Thanks

[Lely]

Hi There,

Please add this code instead on Appearance > Customize > Custom > Edit Global CSS:

jQuery(document).ready(function($) {

  $('.behance').attr('title','Jobscience UK');
});

Hope this helps.

[JS_Marketing16]

Hi,

Thank you so much! I think you meant edit Global Javascript, that’s where I put the code in and it worked!

Best,
Colton

[Rupok]

You are welcome Colton!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts