Adding Font Awesome to Individual Binder Tabs

If you prefer not to add the same Font Awesome icon to all the Binder Tabs, but prefer to assign unique icons to each individual tab then do not select “Font Awesome On” in the customization options, but rather manually install Font Awesome and insert into the Binder Tabs manually (the next 2 steps).

Step 1. Install Font Awesome as outline in this tutorial.

Step 2. For step 5 place the HTML code inside the Binder Tabs text.

Definition of Terms

General Controls

• Theme: Folder Tabs, Detached Tabs, Contained Tabs, Minimalist Thin. Controls the general theme/look of the stack. Depending on the selected theme some options may not be available or may not have an effect.
• Binder Tab Width: Default, Small, Large, Largest. Controls the size of the tabs in comparison to the main content area, so the large setting will create a larger tab, but respectfully a smaller content area.
• Font Awesome On. If turned on you will activate font awesome’s use in the stack’s tabs, though Font Awesome must be installed separately. A tutorial on how to install Font Awesome can be found here.
  • Right Side. This option places the Font Awesome Icon on the right hand side instead of the default left.
  • Font Awesome: Use this field to select the Font Awesome Icon, you can ignore the ‘icon-‘ part.
• Tabs on Right Side. Turning this on will move the tabs to the right hand side instead of their default placement on the left.
• Tab Text on Right Side. By default the text is aligned to the left, though selecting this option will have the text align to the right.
• Tab Count: By default is 4, though can range from 1 – 20.
• Tab Font Size. Controls the pixel size of the tab font.
• Content Font Size. Controls the pixel size of the content font.
• Border Radius. Controls the roundness of the corners (zero turns it off)
• Tab Margin. Controls the spacing between the tabs.
• Tab Line Height. Controls the size of the line height in the tabs.
• Animate On. If this option is active you can control the next option, which is the speed of the animation. Otherwise, tab content will be displayed immediately on click with no animation.
  • Animation Speed: Normal, Slow, Fast. Basic speed options (Normal = 400 millaseconds (ms), Flow = 600ms, Fast = 200ms).
• Static Height On. This option allows the user to control a set height for the stack. Otherwise, the height will adjust depending on the content.
  • Static Height: Sets the pixel height of the stack.

Background Color Controls

• Tab Gradient On. Turns the gradient colors and controls on.
  • Gradient Fade Out. Controls the percentage the gradient ranges across the tab.
• Tab Transparency. Turns the background color off for the tabs.
• Content Transparency. Turns the background color off for the content area.
• Main Background. Background color for the main content area and the active tab in the ‘Folder Tabs’ theme.
• Active Tab. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab. This option has no effect when the gradient is turned on.
• Active Tab Hover. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab when hovered over. This option has no effect when the gradient is turned on.
• Inactive Tab. Background color for any/all inactive tabs.
• Inactive Tab Hov. Background color when inactive tabs are hovered over.
• Active Gradient. The gradient color for the active tab.
• Inactive Gradient. The gradient color for the inactive tabs.
• Active Tab Fade. The color the gradient fades into for the active tab.
• Inactive Tab Fade. The color the gradient fades into for the inactive tabs.

Border Color Controls

• Border Transparency. Turns the borders off.
• Subtle Tab Embed On. Turns on the inner border that has a slight ’embed’ appearance to it. The color option that is made available when this is turned on will not have any effect in the ‘Folder Tabs’ theme (uses background color from the content section).
• Main Border. Sets the color for the main border of the stack.
• Inactive. Sets the border color for inactive tabs.
• Inactive Hover. Sets the border color for inactive tabs when hovered over.
• Embed Color. Sets the subtle embed color for the ‘Contained’ & ‘Detatched’ Tab themes.

Text Color Controls

• Inherit Text Styling. Turns styling for text in this stack off.
• Inherit Link Styling. Turns styling for links in this stack off.
• Active Tab Text. Color for the text inside the active tab
• A Tab (Hover). Color for the text inside the active tab when hovered over.
• Inactive Tab Text. Color for the text inside inactive tabs.
• I Text Hover. Color for the text inside inactive tabs when hovered over.
• Content Color. Color of text in the content section.
• Content Links. Color of links inside the content section.
• C Links Hover. Color of the links inside the content section when hovered over.

Advanced

• Collapsible. If selected this makes the content section able to be completely collapsed. Otherwise, one tab must always be active.
• 1st Active Tab. By default this is set to the first tab, though if you prefer to have a tab other than the first active when the page is loaded you can change it to any of the others.