How to change text/font within an icon link widget on service portal?

[Edwin Fuller]

I need to understand how to update the font for the below icon links within service portal. Ideally I would like to make the text darker / more visible. I believe that is done in the CSS section  

CSS - Icon Link

.iconlink a label,h2 {
display: block;
font-size: 2.5rem;
font-weight: 300;
line-height: 1.1;
padding: 0;
margin: 0 0 10px 0;
}

/* TOP ICON ---------- */

a.top_icon {
display: block;
padding: 20px;
text-align: center;
}

a.top_icon .fa {
display: block;
text-align: center;
}

/* CIRCLE ICON ---------- */

a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}

a.circle_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}

/* COLOR BOX ---------- */

a.color_box {
display: block;
position: relative;
padding: 20px 20px 20px 82px;
border-radius: 4px;
margin-bottom: 20px;
}

a.color_box .fa {
position:absolute;
left: 20px;
top: 20px;
width:42px;
text-align: center;
}

.icon-link-background-primary {
background-color: $brand-primary;
}

.icon-link-background-info {
background-color: $brand-info;
}

.icon-link-background-success {
background-color: $brand-success;
}

.icon-link-background-warning {
background-color: $brand-warning;
}

.icon-link-background-danger {
background-color: $brand-danger;
}

.icon-link-background-default {
background-color: $brand-primary;
}

.text-primary {
color: $brand-primary;

&:hover {
color: darken($brand-primary, 20%);
}
}

.text-info {
color: $brand-info;

&:hover {
color: darken($brand-info, 20%);
}
}

.text-success {
color: $brand-success;

&:hover {
color: darken($brand-success, 20%);
}
}

.text-warning {
color: $brand-warning;

&:hover {
color: darken($brand-warning, 20%);
}
}

.text-danger {
color: $brand-danger;

&:hover {
color: darken($brand-danger, 20%);
}
}

.text-default {
color: $brand-primary;

&:hover {
color: darken($brand-primary, 20%);
}
}

.high-contrast {
.text-primary {
color: darken($brand-primary, 10%);
}

.text-info {
color: darken($brand-info, 10%);
}

.text-success {
color: darken($brand-success, 10%);
}

.text-warning {
color: darken($brand-warning, 10%);
}

.text-danger {
color: darken($brand-danger, 10%);
}

.text-default {
color: darken($brand-primary, 10%);
}
}

[Brandon Barret1]

Hi Edwin, I think you can go ctrl+right click on your icon from the page designer, and edit your instance options to change the color of the icons and text to lighten or darken. It also looks like you have your icon link colors set as css variables, so if you change the color of that variable, it should darken or lighten the text and icon. 

 more info:

https://community.servicenow.com/community?id=community_question&sys_id=0fa7010adb5b2700f21f5583ca96...

[RudhraKAM]

Hello , Try adding /sp_config?id=branding_editor  after your www.****.servicenow.com  and this is branding editor where you can change the font colors size and 

search for the portal  and in the theme color you can change it 

[Oleg]

I'm not sure that I understand you correctly and whether you already cloned the Icon Link widget or you try to make the changing on the page without modification of the widget.

You can use Ctrl right mouse click and choose "Instance in Page Editor". Then you can click on the top page (index for example) and to add the following additional CSS for the page. For example try

.iconlink h2 {
    font-size: 2.5rem;
}
.iconlink .text-muted {
    font-size: 1.3rem;
}
.iconlink .text-muted, .iconlink h2 {
    color: yellow;
    font-weight: bold;
}

It's just an example to show, which CSS selectors you can use. You can add the same selectors to the widget if you cloned it.

[Andrew Bettcher]

Hallelujah. God help me. I wish I knew how to do stuff like that. I've just spent 3 hours fiddling with cloned widgets. It never occurred to me to set the page CSS.

What the hell is a rem? It reminds me of units of measurements used by the Daleks.

Does anyone know how to go back in time so I can learn this kind of stuff at college instead of taking Sociology?