Robux icon inside text

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    i am creating a store, and i would like to have the robux icon near the text
    basicly this:
    :robux: 900

  2. What is the issue? Include screenshots / videos if possible!
    at the moment i use a decal to display the robux logo, this decal is stationary and doesn`t move with the length of the price tag.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub.
    :robux: (with rich text)
    copying from somewhere (but all apear to be images)

7 Likes

You do have to use an ImageLabel. Make an ImageLabel for the robux icon, then make a TextLabel right next to it. To make sure the text stays on it’s side always, set TextXAlignment to either left or right, depending on which side the icon is. No scripting required.

2 Likes

the decal wont do for what i have in mind
i have

"some text that can change in lengt" .. robux logo .. "more text that can change in lengt"
1 Like

In this case, you must create two TextLabels surrounding the icon. Set their TextXAlignments to properly stay within their side.

2 Likes

A decal is required. The Robux icon doesn’t exist as a supported Unicode character. You could create a feature request that asks for this, but I’m not so sure it’s possible.

Disclaimer: I don’t know how emojis and Unicode work at all and if it’s possible to support custom images as Unicode characters for use in text.

3 Likes

What you can do is make a textLable and set the text and where it should be and then make an imageLabel for the image and set the offset to in the x axis to the .TextBounds.X on the text label and now make another text label that is the same offset accept you need to add the width of the imageLabel to it and then you should have what you want

3 Likes

i cant create feature request`s yet , but ty tho

1 Like

Hey,

Sorry to revive an old post but I’ve figured this one out.

You an achieve this using the AutomaticSize property.

In the below example, I’ve managed to create a label which automatically changes size when I update the text:

image

I’m not very good at writing tutorials, but I’ll try my best:

  1. Create a UI element (I’m going to use a Frame)
    image

  2. Set the size of your new frame to {0, 0},{0, 0}

  3. Underneath AnchorPoint you’ll see AutomaticSize. Set this to XY
    image

  4. Inside your Frame, create an ImageLabel and set the size to your preference (I’ll be using 16x16), this will be your Robux icon.

  5. Create a new TextLabel inside your Frame, and set the size to {0, 0},{0, 16}, and then AutomaticSize to X (it is important that the height of your TextLabel is the same as your ImageLabel. This prevents the UI from coming out of alignment)

When you update the text in your TextLabel, your Frame should automatically size to fit the text.
Using this example, you can create easily editable purchase buttons, which you don’t have to resize.

Obviously this solution isn’t great if you want to include a price inside a sentence.

I’ve uploaded a file below, containing my examples.

ui.rbxm (12.4 KB)

7 Likes

A couple years later, it is now possible to use the Robux and premium icon in strings.

Preview:


Screenshot (211)

23 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.