With the introduction of icons, it's easier than ever to place images and text together in the BEE editor. This type of content block allows you to use small images and text together in a single content block to provide more flexibility in your designs.
In order to get started, drag an icon content block into a row. A filler image will fill the content block; click on this to open the icon options in the sidebar.
Click on Add new icon to get started. A pre-loaded icon will populate on the editor stage.
This content block works much like social icons; you can use the pre-loaded icon, or you can change the image by using the Change image button. This will open the file manager. You also have access to the image editor, if you use the Apply effects & more button.
If you use the toggle to open More options, you'll find a couple of options specific to icon content blocks.
If you type in the Icon text field, an additional field will populate in the sidebar.
The text position dropdown allows you to change whether your text will populate above, below, or on either side of the icon image.
If you have multiple icons, you can click and drag them in order to re-order your icons. Select the icon in the upper lefthand corner of the icon properties box to drag it elsewhere.
Below, there are some additional settings. Many of these you may already be familiar with from other types of content blocks.
Settings specific to icons include icon size, in order to make your image icons larger and smaller, as well as icon spacing, which allows you to determine how much spacing exists between the individual content blocks. The other properties (padding, border, alignment, letter spacing, text formatting options, and hide on mobile/desktop) apply to the content block as a whole.
If you're looking for some inspiration for how to use icons in your designs, look no further! Icons can be used in order to:
- Spice up your bullet points
- Create a list of amenities
- Collect feedback
- Insert multiple logos
For more design inspiration in using icons, as well as online resources for premade graphics, see our blog post on using icons in emails.