Flex Guide: Icon Bar

Supported Versions

The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.

Using the Icon Bar

The Flex theme includes the option to enable an 'Icon Bar' that displays above the Footer site-wide. Within the 'Icon Bar' you can add icons with accompanying text and add an optional link, which can turn this 'Icon Bar' into an alternative navigation at the bottom of the page.

The 'Icon Bar' is a distinctive way to allow your customers easy access to important pages, or just to highlight some key info/details about your company and/or products!

There are two 'styles' of icons you can choose from: outline and solid (under Theme Settings > Elements > Icons > Icon Style). The list of available icons to add can be viewed in our Flex Icon List.

In order to set up the Icon Bar section, click into Customize (your Theme Editor) > Sections > Icon Bar > Show Icon Bar.

Section Settings

The 'Icon Bar' section settings determine the look and layout of this section! In addition to configuring the layout, there are also settings for colors and advanced CSS.

The first area of settings for the 'Icon Bar,' you can actually enable the icon bar by checking off the 'show icon bar' setting. You can also select the alignment (left, center, right) , icon position (left, center, right) and size (small, regular, large).

Colors

All of the 'colors' for the 'Icon Bar' can be configured here. You can select the background, link, link hover, and text color settings.

Layout

In the 'Icon Bar' layout settings, you can choose the 'width' which will apply to the icon content.

The options under the 'width' setting include: 'standard' and 'wide.' This setting is helpful if your icon content is dropping down to two lines, and you want it to just remain on one! Selecting 'wide' will spread out the icon content. Selecting 'standard' will keep the icon content in a container and not spread the full-width.

Advanced

In the advanced settings, you can add in your own CSS class and custom CSS.

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.
Content Block Settings

Within the content block settings (Icon Bar > Add Icon and Text), you have the options to enter an 'icon' from our Flex Icon Library, add text, and a link.