Custom Icons for Tab Set

  • 3
  • Question
  • Updated 2 years ago
  • Answered
Is there anyway to bring custom icons in to a tab set? The out of the box icons completely clash with the UI design we are aiming for. 

Ultimately we would like for the Icon to be the tab selector. Exactly like Salesforce Lightning. 
Photo of Josef Lagorio

Josef Lagorio

  • 262 Points 250 badge 2x thumb

Posted 2 years ago

  • 3
Photo of Josef Lagorio

Josef Lagorio

  • 262 Points 250 badge 2x thumb
For anyone wondering how I did this with a tab set, here you go:

Create In-Line CSS (Name it whatever you'd like):
.nx-lefttabs>.ui-tabs-nav {        height: 100vh;  
    background: #0D74BA;
    width: 112px;
}
.sk-icon-help { 
background-image: url(/resource/1487965249000/SkuidIcon_Chart) !important; 
width:75px; 
height:75px; 
background-position: center; 
padding-top:25px;
}

.sk-icon-activities { 
background-image: url(/resource/1487963692000/SkuidIcon_Coins) !important; 
width:75px; 
height:75px; 
background-position: center; 
padding-top:25px;
}

.sk-icon-account-profile { 
background-image: url(/resource/1487965457000/SkuidIcon_Account) !important; 
width:75px; 
height:75px; 
background-position: center; 
padding-top:25px;
}

  • Replace the underlined/bold text with a static resource URL containing your Icon of choice. The icons used in my screen were 75x75.
  • Icon sets can be found here: https://icons8.com/web-app/for/all/transparent
  • Download and Save as PNG
  • Upload as a static resource. 
Create your tab set and add in standard Silk icons to every one of your tabs. From here you'll just need to add in the icon name as I did above and it will be overridden with your static resource image. 

Enjoy :)