Need help on adding Glyph icon

shaik_irfan
Tera Guru

Hi,

 

On the Service Portal i want to add my own custom glyph. Can anyone please help me how to do this

 

 

1 ACCEPTED SOLUTION

@shaik.irfan 

Set the CSS to of the outer div containing the image to this

    background: #1F8476;
    display: inline-block;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 10px;

and set the image css to this

height: 100%;
filter: brightness(0) invert(1);

Note: You don't need to apply filter. I just did that to make it white. You can just upload a white Image. 

Here is the output

find_real_file.png

View solution in original post

20 REPLIES 20

Can you add this to your CSS:

img {
  border-radius: 50%;
}

 

If that works, might be best to give your <img> an id value and set it that way.

No sir, it didnt worked. Can you please look at the instance sir ?

@shaik.irfan 

Set the CSS to of the outer div containing the image to this

    background: #1F8476;
    display: inline-block;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 10px;

and set the image css to this

height: 100%;
filter: brightness(0) invert(1);

Note: You don't need to apply filter. I just did that to make it white. You can just upload a white Image. 

Here is the output

find_real_file.png

@serviceportalpro 

 

Sir,

 

If you dont mind can you please look at my instance. I did not understand what you mean outer div ? 

 

My Image icon html code dont have any div 😞

 

Looks like you have a span that wraps the image in one of your widgets. It should work the same way. 

 

Thanks,
Ritesh

Intellective
Bringing WOW on NOW