Custom Icons for Tab Set

Questions
,
6

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 :slight_smile: