How to Add an Icon to a Designer Ribbon Tab in SpreadJS

Images and icons can be added to the ribbon tabs of the SpreadJS Designer addon ribbon. In this example, we’ll create a new tab for the ribbon, and we will then add an icon to display next to it.

First, we will create a new tab:

//Get Designer
 function getDesigner(designer) {
// Access the default config
var config = GC.Spread.Sheets.Designer.DefaultConfig;
// Layout structure of a new tab
var newTab = {
  "id" : "contactUs", //Tab ID
  "text": "Contact Us", //Displayed tab text
  "buttonGroups": [
      { 
          //Ribbon contents of the tab
          "label": "Contact sales at (+1) 412-681-4343 or us.sales@mescius.com to request temporary deployment authorization.",
          //"commandGroup" is a must required parameter
          "commandGroup": {}
      }
  ]
}
// Add new tab to config ribbon
config.ribbon.push(newTab);

To add an icon or image to be rendered in the new ribbon tab, you can reference your tab ID within styles.css and insert the icon/image similarly to the following CSS:

li[data-id="contactUs"]:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  float: inline-start;
  background: url('https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.png');
  background-repeat: no-repeat;
  background-size: cover;
}