Icon link widget

[MeganDev]

Hello all,

Currently on the /sp portal, when we use icon link widget, the background color is all uniform. Can someone help me on how to set a different background for each section. Preferably a white box for each icon link widget.

The icon links should be uniform in height as well.

[SatyakiBose · Accepted solution]

Hello @MeganDev 

There are a couple of steps to follow here:

1. Firstly, setting a different background for each icon link:
   • get the element name by doing an inspect. it should be of format:

#xeac97921879161509a70cbb9cebb3556 a.top_icon​

• now you need to capture this for all the icon links that you have.
• once this is done, you need to go to the page, and add the CSS as below

#xa5c939ed875161509a70cbb9cebb3582 a.top_icon {
  background-color: #FFE5B4	;
  height: 250px;
  border-radius: 12.8px;
  }

#xeac97921879161509a70cbb9cebb3556 a.top_icon
{
  background-color: #FFD580	;
  height: 250px;
  border-radius: 12.8px;
  }
#xcbc97921879161509a70cbb9cebb3566 a.top_icon
{
  background-color: #FBCEB1;
  height: 250px;
  border-radius: 12.8px;
  }
#xa7c9f1ad875161509a70cbb9cebb3515 a.top_icon
{
  background-color: #FFA500;
  height: 250px;
  border-radius: 12.8px;
  }​

You need to be careful here to capture the correct element name.
I have set different colors, but you can change them to a color of your choice.

• Now to set the height of each icon link same, the above script itself will do the job, as the height has been set to 250px. you can change it as per your requirement.
  
  For me the end result looks like: