Icons Block and Tag
Icons serve a multifaceted role on webpages, excelling in calls to action, elevating design, conveying information succinctly, reducing textual clutter and accentuating key features. The Icons Block brings versatility to both a webpage’s functionality and its visual appeal.
Icon left aligned
Icons serve a multifaceted role on webpages, excelling in calls to action, elevating design, conveying information succinctly, reducing textual clutter and accentuating key features. The Icons Block brings versatility to both a webpage’s functionality and its visual appeal.
EmailIcon library
ZOON includes the free to use, high quality, open source Bootstrap icon library with over 1300 svg icons, these icons combine well with the selected font families. Feel free to add any svg icon to the folder /assets/svg-icons if you can’t find what you are looking for 🧐.
Icon right aligned
Icons serve a multifaceted role on webpages, excelling in calls to action, elevating design, conveying information succinctly, reducing textual clutter and accentuating key features. The Icons Block brings versatility to both a webpage’s functionality and its visual appeal.
Download pdf 57.26 KBBlock content
Icons within the Icons Block can be positioned on the left, right, or center. The content in Icons Blocks can be aligned separately, enabling centering, left alignment, or right alignment in relation to the icons. Additionally, Icons Blocks have the capability to incorporate a background image; in such cases, the aspect ratio can be defined. In the following example, a square aspect ratio has been selected.
Icon center and image
Icons serve a multifaceted role on webpages, excelling in calls to action, elevating design, conveying information succinctly, reducing textual clutter and accentuating key features. The Icons Block brings versatility to both a webpage’s functionality and its visual appeal.
EmailIcon KirbyTag
Utilize a straightforward custom KirbyTag within a Markdown Block to access any of the icons located in the assets folder /assets/svg-icons. Alternatively, for added convenience, consider exploring the Bootstrap icons library online. The preceding heading is generated using the following:
(icon:bookmark-heart
text: Icon KirbyTag
tag: h2
after: y
class:icon-xl)After the tag name icon simply type the name of the icon you want to use. The icons are used as inline svg, that means that the svg code is included in the markup of the page. Within the icon tag, utilize five attributes for customization.
Five attributes
- after: Place the icon after the text attribute. For instance,
after: yes, well ‘nope’ works too 😉. - class: Adjust the size or appearance of icons using classes such as
icon-s,icon-m,icon-l,icon-xl, oricon-xxl. - link: Easily wrap both the icon and text with a link.
- tag: Modify the default wrapper (a
<div>tag) to a different HTML element such as a heading (h2orh3). Note: Be cautious, as the Table of Contents doesn’t supporth2within a Markdown block. - text: Include text either before or after the icon.