Icon

The Icon Block provides a simple way to add and customize visual icons throughout your content. This versatile block enhances your site’s visual appeal while improving user navigation and experience.

Prerequisite:
Active installation of Magazine Blocks Free or Pro.

Enable Icon Block #

To use the Icon block from Magazine Blocks, ensure you have enabled it. Navigate to Magazine Blocks > Blocks. Now, locate the Icon block on the list. If disabled, toggle the switch to enable it.

Add the Icon Block to Your Page/Post #

1. Go to the page/post where you want to add the Icon Block.
2. Click the [+] button in the editor to open the block inserter.
3. Search for “Icon Block” under Magazine Blocks.
4. Click or drag the block into your editor.

Now, you’ll see the icon block on your page or post editor. You can customize the block using the following settings.

Customization Options for the Icon Block #

Magazine Blocks allows you to customize the blocks using different customization options. Click on the icon block, and the right, you’ll see block customization options:

General Settings #

Layout: From here, you can set the minimum height of the icon

Icon: Configure icon appearance and behavior from here. It has the following settings that you can try on:

• Change Icon: Hover on the icon, click “Change Icon”, select from available options, then click “Insert”
• Icon Size: Adjust the size of the icon using the slider.
• Icon Opacity: Control transparency using the slider
• Icon Rotation: Rotate the icon as needed.
• URL: You can add a link to the icon from here.
• Open Link in a New Tab: Enable the URL to be opened in a new tab.

Design: From here, you can customize the design elements for the icon block.

• Preset: Click on the edit button to edit the icon. You can choose from predefined icon styles:
  • Fill: Select this option to add a solid-filled icon.
  • Outline: It adds an outlined icon with no fill.
  • Rectangular Fill: Adds an icon with a rectangular-filled background.
  • Rectangular Outline: Adds an icon with a rectangular outlined background.
  • Rounded Fill: Adds an icon with a rounded filled background.
  • Rounded Outline: Icon with a rounded outlined background.

Style Settings #

Properties: Choose the alignment for the icon block from here. You get two options:

• Horizontal Alignment: Position the icon left, center, or right.
• Vertical Alignment: Adjust vertical positioning from here.

Icon: From here, you can change the background color of the icon

• Background: Click on the edit button to see the color palette, where you can choose the background color of an icon.

Icon Shape: Under these settings, you can see the following options to customize:

• Shape Color: Set the color of the icon shape.
• Shape Border Radius: Adjust corner roundness.
• Shape Padding: Control spacing within the shape.
• Shape Outline Width: Set the thickness of the outline.
• Shape Outline Color: Change the color of the outline.

Border: You can choose the border style for the normal state or hover state:

• Type:  You can choose the border style from here: None, Double Line, Single Dotted, Small Dotted, Solid with shadow.
• Radius: Add radius to the border of the icon from here. You can enter the size in the box to add the radius.
• Box Shadow: Toggle to enable shadow in the border of the icon.

Advanced Settings #

You can customize the settings from here for advanced elements like technical behavior, responsiveness, and custom code integration:

• Spacing: From here, you can adjust the block’s margins and padding for precise positioning. Click on the Spacing, and it’ll allow you to add custom margins and padding.
• Z-index: It controls the stacking order of the block. You can decide which element appears on top when two items overlap (like layers in a photo editor). You can increase or decrease the z-index using this option.
• Responsive condition: You can control whether to show or hide the icon on desktop, tablet, and mobile from here.
• Advanced: This option benefits developers or advanced users who are comfortable with code. From here, you can add CSS ID, CSS Class, and Block HTML to the icon block.
  • CSS ID: Assign a unique ID to target this icon block with custom CSS/JavaScript. Once you have set the ID, you can write the CSS Code to style the block using that specific ID. Additional CSS Class(es): You can add reusable CSS classes to style this icon.
  • Block HTML: You can change the HTML container type for better SEO/accessibility from here.

Best Practices #

• Use consistent icon styles throughout your site for better visual coherence.
• Choose icons that communicate their purpose
• Consider accessibility when selecting icon colors and sizes
• Add URLs to make icons interactive and functional
• Test icon appearance across different screen sizes