Tabs Widget: Icon and Text Spacing Overlap in Tab Labels

the text content in each tab seems to be really far..

I attempted to move the text closer to the awesome font icon. But, it became overlap with the icon. Please advice.

Hi stormingrobots, 

Thanks for using Jotform. I cloned your form and noticed the tab labels overlapping with the Font Awesome icons. To resolve this, you’ll need to reserve extra space for the icons so the text doesn’t collide. Let me walk you through it:

1. First, copy this code:

@charset "utf-8";

/* CSS Document */



@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");



/*==== tab widget ===== */

ul#tabs-list {

  display: flex;

  justify-content: center; /* center the entire row */

  gap: 12px; /* spacing between tabs */

  padding: 0;

  margin: 0;

  list-style: none;

}





.tabs-list {

  display: flex !important;

  justify-content: center !important;

}





.li-tab {

  flex: 0 0 auto !important;

  text-align: center !important;

}



ul#tabs-list li {

  margin: 0;

  padding: 0;

  width: auto !important;

}



/* individual tab styling */

#tabs-list li {

  position: relative;

  z-index: 1;

  margin-top: 20px;

  margin-bottom: 0 !important;

  max-width: 250px;

  line-height: 30px !important;

  white-space: nowrap; /* prevent wrapping */

  background: linear-gradient(to right, #00aee0 0%, #00fedc 51%, #00aee0 100%);

  background-size: 200% auto;

  color: #fff;

  border-radius: 8px 8px 0px 0px;

  outline: none;

  box-shadow: 0 20px 50px rgba(0, 175, 224, 0.3);

  transition: all 0.3s ease;

  font-family: "Montserrat", sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-align: center;

  cursor: pointer;

  overflow: hidden;

  text-overflow: ellipsis;

  padding-left: 28px; /* reserve space for icon */

}



/* extra spacing for 2nd, 3rd, 4th tabs */

#tabs-list li:nth-child(2),

#tabs-list li:nth-child(3),

#tabs-list li:nth-child(4) {

  padding-left: 34px; /* move labels further right */

}



/* text inside each tab */

.tabs-list li .liContent {

  margin: 0; /* no manual offset */

}



/* icon via pseudo-element */

.tabs-list li::before {

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  font-size: 14px;

  position: absolute;

  left: 10px; /* inside reserved padding */

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

}



/* assign icons per tab */

.tabs-list li:nth-child(1)::before { content: "\f19d"; } /* graduation cap */

.tabs-list li:nth-child(2)::before { content: "\f073"; } /* calendar */

.tabs-list li:nth-child(3)::before { content: "\f303"; } /* pencil */

.tabs-list li:nth-child(4)::before { content: "\f46d"; } /* clipboard */





/* hover effect */

#tabs-list li:hover {

  background-position: -100% center; 

  flex: 4;

  transition: transform 0.5s ease-out; 

  z-index: 99;

  color: #000000 !important;

}



/* current tab */

#tabs-list li.current { 

  flex: 4;

  transition: transform 0.5s ease-out; 

  z-index: 99;

  color: #000000 !important;

}



/* template-specific */

.tabs-list.mikadoyellow.current {

  background: linear-gradient

2. In Form Builder, click on the Form Tabs Widget and select the Wand icon to open the Widget Setting on the right side of the page.

3. Now, in the Widget Settings menu, scroll down, paste the code into the Custom CSS box and click on the Update button.

Check out my screenshot below to see the result:

Give it a try and let us know how it goes.