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.

 Here comes the sun!

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:

  1. after: to place the icon after the text attribute;
  2. class: to change the size of the icons or change the appearance;
  3. link: wrap icon and text with a link;
  4. tag: change the default wrapper, a <div> tag, into a heading, h2 or h3 for example;
  5. 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  umbrella. But not my  phone, anywhere  geo-alt.

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)

Watch out 

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

1) Button example