Broken fonticon on FF and IE

ziggyk

Hi there,
I've changed Flickr social icon to the custom one with a non-flickr link because one custom link option is not really enough for my needs.
Problem is that it works fine on Chrome, but for some reason in Firefox and Internet Explorer it goes back to the default flickr icon.

I have this code in Themes > Advanced and CSS tab,

.sm-fonticon-Flickr {
content: url("www.mylink.com/file.png" )!important;
height: 20px;
width: 10px;
background-size: 100%;
margin-top: 6px;
opacity: 0.5;
}

Anyone had a similar issue?

My site - www.zygimantaskucas.com

ziggyk

Ok seems like I've fixed it, although I have a feeling it's a dirty way to do it...
":before" was missing, but once I added that my height and width controls didn't work anymore...then found out about "transform".
Anyway, that's the code I've used in the end.

.sm-fonticon-Flickr:before {
content: url('www.mylink.com/file.png') !important;
display: block;
transform: scale(.16);
opacity: 0.5;
margin-top: -48px;
margin-left: -8px;
}

Hikin' Mike

I'm not seeing a Flickr icon. Did you remove it?

ziggyk

> @"Hikin' Mike" said:
> I'm not seeing a Flickr icon. Did you remove it?

I replaced flickr icon with the imdb one, because my Custom Link is already occupied with LinkedIn so I figured I might as well just modify existing ones.