How can I make a button with an icon and text?

Need help
1

I’d like to create a button like Twitter’s home button. It includes a home icon and ‘Home’ as text.
The button element allows me to add text in the appearance, but how can I include an icon with the text?

2

This might help: https://youtu.be/-4fldTnsvBQ

2 Likes
3

You can accomplish this by placing the home icon and the word “Home” next to each other. Then, select both items and right click - ‘Group elements’.

Screen Shot 2020-12-27 at 8.03.11 PM

2 Likes
4

Hey @darren4

@telaholcomb has a good suggestion. :+1: As an alternative you can try this too.

You can use a text element and then in the text element add:

[fa] fa-home [/fa] Home

This should do what you want, I think. Just in case you don’t have time to watch the 1-Minute cool video. :wink:

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
3 Likes
5

Thanks for sharing. :blush::+1:

2 Likes
6

Of course! Thanks for making the video :grinning:

2 Likes
7

Thank you for the video. I tried this, and it does work, but it feels hacky. I worry this will break at some point. I also don’t see how to adjust margin between the icon and the text label with this approach.

1 Like
8

Hey @garydarna :wave:

Welcome to the Bubble Community! :raised_hands:

I uses this mostly when I need the icon to be right next to the right side of the text. Otherwise you can just use an icon and put a text element next to it if the icon is on the left side.

To adjust the margin, just add spaces with the space bar. It should give you more space in between the icon and text. :blush:

Hope that helps! :blush:

9

This topic was automatically closed after 70 days. New replies are no longer allowed.