6

I want to change the size of an icon inside a button. The image has a size of 512 x 512, i want to resize to 16x16. So, what's the best way to acheive this using javaFX CSS.

Here is what i'm done until now : 

#btnCancel.button {
    -fx-graphic: url("/img/close.png") ;
    -fx-graphic-size:16px 16px ; ( I think this property not exist in javafx css)

}

But this not works for me.

abdou amer
  • 819
  • 2
  • 16
  • 43
  • This [question](http://stackoverflow.com/questions/30098116/javafx-css-button-with-image-how-to-define-the-size-of-the-image) does not have an accepted answer, but it may help you. – Peter Mar 08 '16 at 12:50
  • 1
    The best way to handle this is to provide a 16x16 icon instead of a 512x512 one. – jewelsea Mar 08 '16 at 20:31
  • 1
    Does this answer your question? [JavaFX CSS Button with Image - How to define the size of the image?](https://stackoverflow.com/questions/30098116/javafx-css-button-with-image-how-to-define-the-size-of-the-image) – Tharindu Sathischandra Jun 27 '20 at 14:22

2 Answers2

8

I am not aware of any css property that can be used directly to set the -fx-graphic's size but you can achieve similar results using -fx-background-image property. This will allow you to set width and height values using -fx-background-size.

You can access BackgroundSize's javadoc from this link

.logButton {
    /*
    -fx-graphic: url(images/log2.png);
    -fx-graphic-size:16px 16px;
    */
    -fx-background-image: url(images/log2.png);
    -fx-background-size: 64px 64px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}

See in action

Using -fx-graphic

Button with -fx-graphic

Using -fx-background-image with -fx-background-size

Button resized with -fx-background-size

Teocci
  • 7,189
  • 1
  • 50
  • 48
rozaydin
  • 613
  • 9
  • 12
4

I know this question is about css, but for other programmers out there that want to do this with java code and finds this thread, here is my solution of doing it with java code. (instead of asking a new question)

Platform.runLater(() -> {
    InputStream input = getClass().getResourceAsStream("/resources/images/close-512x512.png");
    //set the size for image
    Image image = new Image(input, 16, 16, true, true);
    ImageView imageView = new ImageView(image);            
    myButton.setGraphic(imageView);
});
Darrel K.
  • 1,611
  • 18
  • 28
  • @kleopatra There are multiple questions where this code can be used as an answer yes. This is a possible solution if anyone wants to do it with java code. – Darrel K. Mar 08 '18 at 10:55
  • yeah, but not the requirement here: _what's the best way to acheive this using javaFX CSS_ – kleopatra Mar 08 '18 at 11:33
  • I get your point and thank you very much for helping me out. I was looking for a solution that as the one I provided when landed on this question, So I taught maybe there is someone else that might end up here an they would like all possible solutions shown and choose which ever suites them. Instead of asking a new question. – Darrel K. Mar 08 '18 at 11:41
  • 1
    please don't feel discouraged - help is always welcome :) Just stay focused on the problem in future answers. – kleopatra Mar 08 '18 at 11:46