4 Replies Latest reply on Dec 5, 2012 1:28 AM by jsmith

    Text under the image of a button

      I'm doing some buttons with image and wish you text. However I can not make the text is placed below the image.

      Is there any way to do this?

      I'm building button with Scene Builder.

      The CSS I hold to insert the image in the button is as follows:
      #chatButton {
          -fx-text-fill: white;
          -fx-graphic: url("../signa/img/chat.png");
          -fx-background-color: transparent;
      Edited by: biochemistry43 on 4/12/2012 08:06 AM
        • 1. Re: Text under the image of a button
          Try this:
          Button b = new Button("Text");
          I don't know if it works if you set the graphic via CSS.

          • 2. Re: Text under the image of a button
            but I'm building button in FXML through Scene Builder
            • 3. Re: Text under the image of a button
              Then you can select the value of the Content Display property by selecting the button and choosing the desired value in the Properties section in the right sidebar. I can't find anything to set the graphic of the button, but you can edit the FXML directly and set graphic there:
              <Button text="Click me" graphic="path to your graphic" />
              It is possible, that it won't work, try using this if that's the case:
              <Button text="Click me">
                      <fx:reference source="path to the graphic"/>
              1 person found this helpful
              • 4. Re: Text under the image of a button
                <?xml version="1.0" encoding="UTF-8"?>
                <?import java.lang.*?>
                <?import java.util.*?>
                <?import javafx.scene.control.*?>
                <?import javafx.scene.image.*?>
                <?import javafx.scene.layout.*?>
                <?import javafx.scene.paint.*?>
                <AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
                    <Button contentDisplay="TOP" layoutX="222.0" layoutY="165.0" mnemonicParsing="false" text="Sweeeet !!!">
                            <Image url="http://icons.iconarchive.com/icons/fasticon/valentine/128/heart-love-icon.png" />
                1 person found this helpful