General Elements How to Add an Icon Box in Bricks Builder Using BricksFly Estimated reading: 5 minutes 86 views Icon Box Element lets you combine an icon, title, description, and optional button into a single content block. You can customize its layout, alignment, styles, and button settings to highlight services, features, or key information on your website. Requirement Make sure you have installed: Bricks Theme BricksFly Pro Activate Icon Box In BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Elements tab. Under General, toggle On Icon Box. Step 1: Configure the Icon Box Content Add and configure the Icon Box icon, title, description, and optional box link. Icon Lets you select the icon displayed inside the Icon Box. Choose an icon that represents the service, feature, or information shown in the box. Title Adds the main heading of the Icon Box, such as Web Design, Fast Performance, or Technical Support. In this example, the title is set to Customer Support. Title Tag Sets the HTML tag used for the title, such as H2, H3, H4, div, or p. Choose a tag that follows your page’s heading structure. In this example, the title is set to H3, but you can select any suitable option. Description Adds supporting text below the title. Use it to briefly explain the service, feature, or topic. Box Link Adds a link to the entire Icon Box. Visitors can click anywhere on the box to open the selected page or URL. In this example, the field is left empty. Step 2: Adjust Icon Box Layout and Alignment Customize the Icon Box layout, content direction, alignment, spacing, and gradient styling to match your design. Layout Default: Displays the icon, title, and description in a standard Icon Box layout. Stacked Cards: Displays the content in a layered card-style design, giving the box more visual depth. Bordered: Adds a visible border around the Icon Box to separate it from the surrounding content. Minimal: Uses a clean layout with fewer decorative elements, making it suitable for simple designs. Floating Icon: Positions the icon so that it appears to float over or outside part of the box. Gradient Bar: Adds a gradient-colored bar as a decorative accent within the Icon Box. Icon + Left Bar: Displays the icon with a vertical accent bar on the left side of the content. Zoom on Hover: Applies a zoom effect when visitors move the pointer over the Icon Box. Flip Card: Displays a card that flips on hover to reveal additional content or a different side. Slide Up Reveal: Reveals hidden or secondary content by sliding it upward when the visitor hovers over the box. In this example, Gradient Bar is selected, but you can choose any option that suits your design. Direction Controls how the icon and content are arranged. Vertical: Displays the icon above the content. Horizontal: Displays the icon on the left and the content on the right. Horizontal Reverse: Displays the content on the left and the icon on the right. Vertical Reverse: Displays the content above the icon. In this example, Horizontal Reverse is selected. Alignment Controls the horizontal alignment of the Icon Box content. Left: Aligns the content to the left. Center: Aligns the content in the center. Right: Aligns the content to the right. Icon Vertical Align Controls the vertical position of the icon when using a horizontal layout. Top: Aligns the icon with the top of the content. Center: Aligns the icon with the vertical center of the content. Bottom: Aligns the icon with the bottom of the content. Content Gap Controls the space between the icon and the content. Increase the value to add more separation or decrease it to bring them closer together. In this example, the option is left at its default setting. Bar Gradient Controls the gradient colors used by layouts that include an accent bar, such as Gradient Bar or Icon + Left Bar. Step 3: Configure the Button Show Button Displays or hides the button within the Icon Box. In this example, the button is enabled. Button Text Sets the text displayed on the button, such as Learn More, View Details, or Get Started. Button Link Adds the destination URL that opens when visitors click the button. In this example, the field is left empty, but you can add any suitable link. Button Icon Lets you select an icon to display inside the button. In this example, no icon is selected. Icon Position Controls whether the button icon appears before or after the button text. In this example, After is selected. Style Type Lets you choose the button’s preset visual style, such as a solid, outlined, or other available design. In this example, Solid is selected, but you can choose any available option. Hover Effect Applies a visual or animation effect when visitors move the pointer over the button. Available options include: Fill Left: Fills the button background from right to left. Fill Right: Fills the button background from left to right. Fill Top: Fills the button background from bottom to top. Fill Bottom: Fills the button background from top to bottom. Shrink: Slightly reduces the button size on hover. Grow: Slightly increases the button size on hover. Icon Slide: Slides the button icon when a visitor hovers over the button, adding a smooth movement effect. In this example, Fill Left is selected. Size Controls the overall size of the button, including its text and spacing. Full Width Expands the button across the full available width of the Icon Box. When disabled, the button uses only the space required by its content. In this example, this option is disabled. Final Result
