ZOON 2 uses the free, high quality, open source Bootstrap icon library with over 1,300 svg icons.
<box> (icon: cloud-sun text: Here comes the sun! class: icon-xxl block center) </box>
Note: you can also add ‘box’ in the block settings class option, to put content in a box.
After the tag name
icon simply type the name of the icon you want to use. Please visit the Bootstrap Icons page for an overview of all the icons. The icons are used as inline svg, that means that the svg code is included in the markup of the page. Because no image file needs to be downloaded, this results in faster loading pages and improved user experience.
There are five attributes you can use within the icon tag:
- after: to place the icon after the text attribute;
- class: to change the size of the icons or change the appearance;
- link: wrap icon and text with a link;
- tag: change the default wrapper, a
<div>tag, into a heading,
- text: the text followed or preceeded by the icon.
Tag 'span' for icons in text: Share my (icon: umbrella text: umbrella tag: span). But not my (icon: phone text: phone tag: span), anywhere (icon: geo-alt text: geo-alt tag: span).
Share my. But not my , anywhere .
There are 5 predefined classes to adjust the size: (icon: alarm class: icon-s) (icon: bell) default size (icon: bookmark-star class: icon-m) (icon: calendar-date class: icon-l) (icon: chat-left-quote class: icon-xl) (icon: shield-check class: icon-xxl)
Icon in heading: (icon: exclamation-diamond text: Watch out tag: h3 after: y)
Using a link: (icon: people-fill text: Meet the team class: icon-xxl block center primary-color strong link: /features/icons)
Tooltip with an icon: (tooltip: tip-1 text: animate scale trigger: click animate: scale icon: info-circle)