Buttons: customize with symbols

Hi.

That’s what the documentation says:

Buttons ‍are ‍highly ‍customizable, ‍you ‍can ‍set ‍fonts ‍and ‍text ‍style, ‍background ‍color ‍or ‍images, ‍borders, ‍shadow ‍and ‍colors ‍for ‍hover ‍states.

This gave me the idea of adding a matching icon to the button. Unfortunately, this is not possible in a direct way.

So I created the text separately and inserted the symbol there. Then cut&paste into the button. On the canvas it is displayed correctly, but not in the preview and certainly not live.

In standard text the symbol is always displayed correctly.
Is this a bug or feature?

Canvas:
Bildschirmfoto 2022-03-25 um 10.57.28
Bildschirmfoto 2022-03-25 um 10.57.47

Preview and live:
Bildschirmfoto 2022-03-25 um 10.58.55

Which method was used to decorate the buttons here in the forum?
Bildschirmfoto 2022-03-25 um 11.02.25

Help or bugfix is highly appreciated :slightly_smiling_face:

Mr. F.

Hi Horst,

Just checking - do you use [CTRL]+[CMD]+[SPACE] to insert a symbol?

Hi.

No. But will try this.
I use the button underneath “insert smart field”

Your method: [CTRL]+[CMD]+[SPACE] to insert a symbol
seems to do the job. Thank’s for the hint :+1:

Mr. F.

It’s most likely that you added a symbol from a font that’s not the same font as the one used in the button itself.

Using the system symbol/emoji picker is one way (though I’m not sure the symbols shows up correctly in a cross platform way), or you can user Insert → Icon… while editing the button text, pick one from the Fontawesome/Material design sets, and Sparkle will inject an SVG in the button:

image

Hello Duncan.

That’s more or less the method is used. I picked (copy&paste) a Fontawesome icon. On canvas the symbol is displayed, but not in preview. And i do not see that it is converted into a SVG.

[CTRL]+[CMD]+[SPACE] to insert a symbol seems to work.

Mr. F.

What I said is not to copy/paste from fontawesome, but to use Sparkle’s picker.

Conceivably we should maybe support copy/pasting a fontawesome glyph, but that’s not supported currently.

As mentioned the emoji/symbol picker you are using ends up using the font fallback mechanism, so it might not work on Windows (but I haven’t checked).

Hi Duncan.

I’m sorry, but that does not work for me. Step by step:

I highlight the button until i can edit the text in it (not in the inspector panel on the right)
I hit the menu bar: insert → Symbol … (german version, last entry in the dropdown)
The FontAwesome Popup shows up with the arrow on top pointing to the text where i will insert the symbol.
I search for right symbol and klick it.
The symbol travels to the button. It is visible on the canvas.
I hit Preview the page → The symbol is gone.

Is that the way you described? Or what am i doing wrong?

Mr. F.

I have no issues with this…

  • I drop a button on the canvas and call it say “Shop”.
  • I then go Insert / Icon and choose the icon from the popup window. It deposits it on the canvas.
  • I then double click the icon element and copy the icon glyph…
  • I then paste it in the button field next to the button word “Shop”

All what I do then is play with the font size of the button and the line-height to get the icon glyph to align nicely with the wording. It works correctly in Preview and on the server in the wild! :slight_smile:

Hi @FlaminFig

Good Lord, i should have mentioned that i was fiddling with the buttons of the site search feature and the login form.
Did not expect that this could be the reason.
Maybe @Duncan should have a look into this.

Adding a regular button and decorating it with a symbol does work.
Maybe that should be aligned.

The problem seems to affect all buttons that are related to a form. Also the button to send a form cannot be decorated with this method.

Mr. F.

Ahhh, thank you for clarifying! :slight_smile:

I concur with you. When pasting an icon glyph in the search button it doesn’t work. In Preview it doesn’t recognise the icon glyph.

Ah ok. Yes that looks like a bug, thanks.

Hello.

This bug is still present :pensive:

Mr. F.