XF 2.2 How to add custom icon in widget?

[Agentos]

I'm trying to figure it out how to add a custom icon in a widget. I don't mean the Font Awesome icons. I want these to be my own or the Material Icons

This code not working

/* member widget*/
.p-body-sidebar [data-widget-key="ranking"] .block-minorHeader:before {;   
    font-family: "Material Icons";
    content: "star";
    padding-right: 9px;
    display: inline-block;
}

 

[Old Nick]

You can try this

/* member widget*/
[data-widget-key="ranking"] {
    .block-minorHeader:before {   
        font-family: "Material Icons";
        content: "star";
        padding-right: 9px;
    }
}

 

[Agentos]

You can try this

/* member widget*/
[data-widget-key="ranking"] {
    .block-minorHeader:before {  
        font-family: "Material Icons";
        content: "star";
        padding-right: 9px;
    }
}

Not working

 

[Agentos]

I had a code with a custom icon that worked perfectly but I can't find it. The icon was uploaded to the server and I indicated the location in the code

 

[Old Nick]

How did you "activate" Material Icons on you forum ?

The icon was uploaded to the server and I indicated the location in the code

[data-widget-key="ranking"] {
    .block-minorHeader:before {   
        content: url("/path/to/the/icon.png");
        padding-right: 9px;
    }
}

 

[Mr Lucky]

If you don't need the image to be clickable it's easy to do with a background image:

.p-body-sidebar [data-widget-id="56"] .block-container

{       
background-image:url("path_to_image");
    padding-top:50px;
    background-size:50px 50px;
    background-position:center top;
    background-repeat:no-repeat;
}

 

[Agentos]

How did you "activate" Material Icons on you forum ?

I have the opportunity to test the style in which these icons are installed

How did you "activate" Material Icons on you forum ?

[data-widget-key="ranking"] {
    .block-minorHeader:before {  
        content: url("/path/to/the/icon.png");
        padding-right: 9px;
    }
}

If you don't need the image to be clickable it's easy to do with a background image:

.p-body-sidebar [data-widget-id="56"] .block-container

{      
background-image:url("path_to_image");
    padding-top:50px;
    background-size:50px 50px;
    background-position:center top;
    background-repeat:no-repeat;
}

These css codes also don't work in the default style

 

[Old Nick]

These CSS codes works for me in default style.

 

[Agentos]

[data-widget-key="online_now"] {
    .block-minorHeader:before {  
        content: url("/path/icons/clip.png");
        padding-right: 9px;
    }
}

 

[Mr Lucky]

I have the opportunity to test the style in which these icons are installed



These css codes also don't work in the default style

Yes they do. perhaps you have the wrong image path for your icon?

 

[Agentos]

Yes they do. perhaps you have the wrong image path for your icon?

Yes, the path must be wrong, because the code worked with the link. Your code doesn't work at all, and both code doesn't work in the main style.

[data-widget-key="online_now"] {
    .block-minorHeader:before {   
       content: url("https://i.imgur.com/n1CNnme.png");
        padding-right: 9px;
    }
}

 

[Mr Lucky]

our code doesn't work at all, and both code doesn't work in the main style.

The code I quoted does work because I am running on my site, and tested both with the default style and also with my slightly customised default style.

 

[Agentos]

The code I quoted does work because I am running on my site, and tested both with the default style and also with my slightly customised default style.

It doesn't work for me

 

[Mr Lucky]

It doesn't work for me

Then my suggestion is that you need to check either the url or the widget id, or both.

 

[Agentos]

Maybe I will come back to it someday. Thanks for helping me though @nicodak @Mr Lucky

 

[Mr Lucky]

Thanks for helping me though

You're welcome.

BTW here we are on default theme: