Icon Element
The Icon Element places a single icon from the icon library on the page. You choose the icon, its size and color, and whether it sits on a round or square background with a border. Icons work well as small visual markers next to a heading, in a row of features or as a compact link.
An icon can be flipped, rotated or set to spin, and it can change on hover with a fade, pulsate or slide animation. When you add a link, the whole icon becomes clickable and opens the address in the same or a new tab.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Icon Element
Add the Icon Element to any column and pick an icon in Select Icon. Set the Icon Size in pixels and use Flip Icon, Rotate Icon or Spinning Icon if the symbol needs to face another way or move. Choose an Alignment: Text Flow keeps the icon inline with the surrounding content, while Left, Center and Right place it on its own line.
On the Design tab set the Icon Color. Turn on Icon Background to show a shape behind the icon, then adjust its size, color, border and the corner shape with Border Radius. Icon Hover Animation Type adds a fade, pulsate or slide effect when the visitor points at the icon.
Enter a Link to make the icon clickable and pick the Link Target. Leave Margin empty and the spacing is calculated automatically from the alignment and icon size. The Extras tab adds an entrance animation and conditional rendering.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Icon. Change them there to style every Icon at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Select Icon | Click an icon to select, click again to deselect. |
| Icon Size | Controls the size of the icon. In pixels. |
| Flip Icon | Choose to flip the icon. |
| Rotate Icon | Choose to rotate the icon. |
| Spinning Icon | Choose to let the icon spin. |
| ARIA Label Attribute | Set an aria-label attribute for the icon. |
| Link | Add the url the icon should link to. |
| Link Target | Controls how the link will open. |
| Alignment | Select the icon’s alignment. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | Spacing around the icon. In px, em or %, e.g. 10px. NOTE: Leave empty for automatic margin calculation, based on alignment and icon size. |
| Icon Color | Controls the color of the icon. |
| Icon Background | Turn on to display a background behind the icon. |
| Icon Background Size | Controls the background size of the icon. Set to -1 to use default calculations. In pixels, for example 35. |
| Icon Background Color | Controls the color of the icon background. |
| Icon Background Border Size | Controls this setting. |
| Icon Background Border Color | Controls the color of the background border. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Icon Hover Animation Type | Select the animation type for icon on hover. Select default for Global Options selection. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- When the icon is a link, fill in the ARIA Label Attribute with a short description of the destination. Without it, screen readers only hear “Link to” followed by the address.
- Links set to open in a new tab automatically get
rel="noopener noreferrer". - Leave Margin empty unless you need exact spacing; the automatic margin already adapts to the alignment and the background size.
- Use spinning icons sparingly. A constantly moving icon distracts from the content around it.
- Options left on Default follow the Icon settings in Global Options, so you can change the look of all icons on the site in one place.