The Icon List Block is a versatile component designed to help you create visually appealing lists with custom icons. This block offers extensive customization options for both icons and text, making it perfect for feature lists, service highlights, contact information, or any content that benefits from visual enhancement with icons.
Key Features
The Icon List Block includes a comprehensive set of features to meet all your list creation needs:
Flexible Icon Options: Choose from thousands of Font Awesome icons or upload custom SVG icons
Multiple Layout Styles: Display lists horizontally or vertically with customizable alignment
Interactive Item Management: Add, remove, reorder, and duplicate list items with ease
Individual Item Customization: Set unique icons and links for each list item
Typography Controls: Full control over text styling and appearance
Responsive Design: Device-specific controls for optimal display across all screen sizes
Color States: Normal and hover color options for both icons and text
Advanced Styling: Border, shadow, and spacing controls with hover effects
Animation Effects: Choose from various entrance animations to enhance engagement
Link Support: Add clickable links to individual list items
Adding the Icon List Block
To add an Icon List Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Icon List” or navigate to the “DigiBlocks” category
- Click on the “Icon List” block to add it to your page
- The block will appear with a default list item that you can customize
Managing List Items
Adding New Items
Click the “Add Icon List Item” button at the bottom of the block to create new list items. Each new item includes:
- An editable text field with rich text capabilities
- A default icon that can be customized
- Optional link functionality
- Individual management controls
Editing Item Content
Text Content:
- Click on the item text to edit inline
- Use the rich text toolbar for formatting (bold, italic, inline code)
- Text supports single or multi-line content based on your needs
Icon Selection:
- Hover over an item and click the “Edit Icon” button (customizer icon)
- Choose between library icons or custom SVG upload
- Preview icons before applying them
Item Management Controls
Each list item includes hover controls for easy management:
Edit Icon: Open the icon selection modal to choose or upload icons
Link: Add, edit, or remove links for individual items
Move Up/Down: Reorder items by moving them up or down in the sequence
Duplicate: Create a copy of an existing item to save time
Remove: Delete unwanted items with a single click
Layout Configuration
List Layout Options
Vertical Layout: Items stack vertically in a traditional list format
Horizontal Layout: Items display side by side in a row with wrapping
List Alignment
Control how your list items are aligned within their container:
Left: Items align to the left edge (default)
Center: Items align to the center for balanced display
Right: Items align to the right edge
Icon Position
Choose where icons appear relative to the text:
Before: Icons appear before the text content (default)
After: Icons appear after the text content
Icon Settings
Default Icon Configuration
Set a default icon that will be applied to new list items:
Icon Source Options:
- Library: Choose from thousands of Font Awesome icons
- Custom: Upload your own SVG code for unique icons
Library Icon Selection:
- Browse icons by category or search by name
- Preview icons before selection
- Icons are automatically optimized for web display
Custom SVG Upload:
- Paste SVG code directly into the text area
- Preview custom icons before applying
- Ensure SVG code contains only valid markup
Icon Styling
Icon Size: Use responsive controls to set icon sizes for different devices. Icons scale proportionally while maintaining crisp appearance.
Icon Spacing: Control the gap between icons and text content with responsive settings for optimal spacing across all screen sizes.
Item Spacing: Adjust the vertical or horizontal spacing between list items depending on your chosen layout.
Link Functionality
Adding Links to Items
Each list item can include an optional link:
- Hover over the desired item
- Click the “Link” button (chain icon)
- Enter the URL or search for internal pages
- Configure link settings as needed
Link Options
URL Input: Enter external URLs or search for internal WordPress content
Open in New Tab: Choose whether links open in the same window or a new tab
Rel Attribute: Add nofollow or other rel attributes for SEO control
Link Removal: Easily remove links while keeping the item content
Styling Options
Icon Styles
Customize the appearance of your icons with comprehensive styling controls:
Normal State Colors:
- Icon Color: Set the default icon color
Hover State Colors:
- Icon Hover Color: Color when users hover over items
Icon Size: Responsive controls for different screen sizes (8px to 100px range)
Text Styles
Style the list item text separately from icons:
Color Controls:
- Text Color: Set the default text color
- Text Hover Color: Color when users hover over items
Typography Settings:
- Font Family: Choose from available fonts
- Font Size: Responsive sizes for all devices
- Font Weight: Control text weight (light, normal, bold, etc.)
- Font Style: Apply italic or normal styling
- Text Transform: Use uppercase, lowercase, or capitalize
- Text Decoration: Add underlines or other decorations
- Line Height: Control vertical spacing between lines
- Letter Spacing: Adjust character spacing
Box Styling
Border Controls:
- Border Style: Choose from solid, dotted, dashed, double, groove, inset, outset, ridge, or none
- Border Colors: Set normal and hover border colors
- Border Width: Responsive control for border thickness
- Border Radius: Create rounded corners with responsive controls
Background Colors:
- Background Color: Set the normal background color
- Background Hover Color: Background color on hover for interactive feedback
Hover Effects:
- None: No special hover effect
- Lift: Items lift slightly on hover
- Scale: Items scale up slightly on hover
- Glow: Items brighten on hover
Box Shadow Options
Add depth and visual interest with comprehensive shadow controls:
Normal Shadow: Set shadows for the default state with controls for:
- Position (inset/outset)
- Horizontal and vertical offsets
- Blur radius and spread
- Shadow color
Hover Shadow: Create different shadows on hover for enhanced interactivity
Spacing Controls
Padding: Control internal spacing within the list container with responsive settings for all sides
Margin: Control external spacing around the list container with responsive settings
Item Spacing: Adjust the gap between individual list items (0-100px range)
Icon Spacing: Control the gap between icons and text (0-50px range)
Advanced Features
Animation Effects
Add entrance animations to make your icon list more engaging:
Available Animations:
- Fade effects (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight)
- Slide effects (slideInUp, slideInDown, slideInLeft, slideInRight)
- Zoom effects (zoomIn, zoomInUp, zoomInDown)
- Bounce effects (bounceIn, bounceInUp, bounceInDown)
- Rotation effects (rotateIn, rotateInDownLeft, rotateInDownRight)
Animation Preview: Use the preview button to test animations in the editor before publishing.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices:
Icon Sizes: Scale icons appropriately for each screen size
Typography: Set different font sizes and line heights per device
Spacing: Adjust padding, margins, and item spacing per device
Layout Adaptation: Lists automatically adapt to smaller screens
Visibility Controls
Control when your icon list appears on different devices:
Hide on Desktop: Hide the block on desktop screens (992px and up)
Hide on Tablet: Hide the block on tablet screens (768px to 991px)
Hide on Mobile: Hide the block on mobile screens (767px and below)
Note: Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.
Additional Options
HTML Settings
HTML Anchor: Create a unique anchor link for the icon list block to enable direct linking to this section of your page
Additional CSS Classes: Add custom CSS classes for advanced styling or integration with custom themes
Best Practices
Content Organization
Clear and Concise: Keep list items brief and focused on key points
Logical Ordering: Arrange items in order of importance or logical sequence
Consistent Language: Maintain the same tone and style throughout your list
Relevant Icons: Choose icons that clearly represent each list item’s content
Design Considerations
Icon Consistency: Use icons from the same style family for visual coherence
Readable Typography: Ensure sufficient color contrast between text and backgrounds
Appropriate Spacing: Use adequate spacing to avoid cramped or overly spread content
Responsive Testing: Preview your icon list on different screen sizes
Performance Optimization
SVG Optimization: Ensure custom SVG code is clean and optimized for web use
Icon Count: Consider using pagination or categorization for very long lists
Animation Usage: Use animations sparingly to avoid overwhelming users
Image Optimization: Keep custom SVG files as small as possible
Accessibility Considerations
Meaningful Icons: Choose icons that clearly convey meaning to all users
Color Independence: Don’t rely solely on color to convey information
Text Alternatives: Ensure text content provides clear context even without icons
Keyboard Navigation: Test that linked items are accessible via keyboard navigation
Common Use Cases
Feature Lists
Create compelling feature lists for products or services:
- Use check marks or star icons for features
- Organize by priority or category
- Include links to detailed feature pages
Contact Information
Display contact details with appropriate icons:
- Phone, email, and location icons
- Clickable links for phone and email
- Consistent spacing and alignment
Service Highlights
Showcase your services with descriptive icons:
- Industry-specific icons for different services
- Brief descriptions with links to service pages
- Professional styling with hover effects
Social Media Links
Create social media link lists:
- Brand-specific social media icons
- Consistent sizing and spacing
- Links that open in new tabs
Navigation Lists
Build custom navigation elements:
- Directional arrows or menu icons
- Clear hierarchy and organization
- Responsive design for mobile menus
The Icon List Block provides a powerful and flexible solution for creating professional, accessible, and visually appealing lists that enhance user experience while maintaining design consistency and optimal performance across all devices.