Icons
ZOON 2 uses the free, high quality, open source Bootstrap icon library with over 1,300 svg icons.
Icon tag
By using a simple custom KirbyTag in a Markdown Block a plethora of icons are at your disposal.
<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,h2orh3for example; - text: the text followed or preceeded by the icon.
Icon examples
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)| class | icon |
|---|---|
| icon-s | |
| – | |
| icon-m | |
| icon-l | |
| icon-xl | |
| 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)Share
Tooltips
Please turn on javascript