Is it possible to use Kirby icons in info fields?

Kirby 4 Solved ✔️
1

A little question: Is it possible to use Kirby icons in info fields? I like to use info fields to explain functions in the panel. If I write there: “Click on the ‘open’ button to see the page in the frontend”, it would be helpful to also show the button visually.

2

You could throw the html in or use a custom kirbytag.

3

Thanks for the tip. I wasn’t brave enough to use HTML code. That works fine, but how do I get rid of the wrap? Is there a Kirby CSS class so that the icon floats in the text?

infotext:
  label: false
  type: info
  theme: passive
  text: |
    Platzhalter sind praktische Abkürzungen für sich wiederholende Texte, <span class="k-button-icon"><svg aria-hidden="true" data-type="open" class="k-icon"><use xlink:href="#icon-open"></use></svg></span> Adressen, Telefonnummern, Namen usw. Vermeiden Sie Wiederholungen häufig genutzter Inhalte, indem Sie stattdessen ein kurzes Schlüsselwort einfügen...

icon
icon998×558 39.8 KB

4

Styling maybe?

1 Like
5

Hey,

i fixed it with the following code.

.k-info-field .k-icon svg {
	display: inline;
}

and changed

<span class="k-button-icon">

to

<span class="k-icon">
1 Like
6

This removed the wrap, but the icon was too big and was not centered on the line height.
I was able to solve it this way:

panel-icon
panel-icon1780×514 42.2 KB

custom-panel.css

span.my-panel-icon.k-button-icon {
  display: inline-flex;
  align-self: center;
}
span.my-panel-icon.k-button-icon svg {
  height:1em;
  width:1em;
}
span.my-panel-icon.k-button-icon svg {
  top: .125em;
  position: relative;
}

blueprint:

infotextDashboard:
  label: false
  type: info
  theme: passive
  text: |
    Das <span class="my-panel-icon k-button-icon"><svg class="k-icon"><use xlink:href="#icon-grid"></use></svg></span> Dashboard ist die Steuerungszentrale dieser Website....

Here’s a good example, how to align SVG icons: https://codepen.io/elliotdahl/pen/ygYrvm

7

I stumbled upon this thread because I was searching for a solution to add an icon at the beginning of the info text and I fund out that this is possible by default.

myinfo:
  type: info
  theme: info
  text: This is a text about mails
  icon: email

Just for the record, in case anyone else ist looking for this …

1 Like