How to change Icon Link widget colors

[pmadireddy5108]

How to change Icon Link widget webpart colors. I have edit the webpart and change the webpart colors by selecting bootstarp colors(danger, success, primary, default....).

Now I want apply custom colors for webpart. Is there any way to change bootstarp colors or apply custom colors?

Please find the attached screenshots

[patricklatella]

Hello Jeet,

I'm trying to set the background color for each of the icon links on our Service Portal index page...I've added the script from your post, but it's not working.  Anything I should troubleshoot?  thanks!

[patricklatella]

sorry Avaranasi, I perhaps should have address you in my last post...but either way Hi to you and Jeet.  I am trying to signify what a background color for the icon links on our service portal index page.  I also tried applying the CSS to the instance link CSS, but still not working...anything I'm missing?  thanks!

[suburaman m]

Hello Patrick,

You can change the color of each icon link,by adding your custom colors in the dictionary->choices. and do remember the value. then Go to configure style, paste the same value and add the style as "background-color:#yourchoice" and save. now in widget icon-link add CSS code

".icon-link-background-purple {
background-color:#yourchoice; same color which is given in style
}"

that's all, you can use Your colors in different icon links by editing in page editor.

[suburaman m]

Hi,

It is possible to have different color for different widget icons apart from default colors by configuring the dictionary--choices. Remember the value and go to Configure style,paste the same value and in style add"background-color:#yourchoice". Then go to the widget "icon link", under CSS add ".icon-link-background-value {
background-color:#yourchoice;
}

that's all, You can choose your respective color and will reflect in portal.

Thanks.

[Mitchell Moses]

Okay, I came up with a better way for this. If you don't care about losing some colors, then in the CSS code pick a color you're not going to use like "danger". Go to every place you see $brand-danger; and change it to the Hex number you want for the color like #00a3a0. Boom, new color. (Assuming you have made a copy of the Icon Link widget)