How do you align an image above the text in a button?

0 votes

The Button has an "Align" property that allows for Left, Center, and Right, and an "Icon Align" property that allows for Left, Center, and Right. How do you create a button where the picture/icon is above the text, i.e.:

 .---------.
|    **    |
|          |
|   text   |
`----------'

Is this possible?

Godot version 3.5RC3
in Engine by (37 points)

2 Answers

0 votes

I believe you need to use TextureButton in this case. Just create a TextureButton and assign different textures in the inspector. For the text base texture such as your example, you might need to use viewport texture. Like this: https://imgur.com/SnYSnXq

by (16 points)
0 votes

Yes, this is possible. You just need to create Button, and then add TextureRect and Label as childs of this button. You can also use MarginContainer and VBoxContainer to make responsive design.
Note that you need to set TextureRect and Label property mouse > filter to Ignore to make sure they propagate GUI events to button.

by (1,650 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.