2

I'm using fontawesomefx-8.9 and I have set their font size to 15px using 

.glyph-icon {
  -fx-font-size: 15px;
}

Then I have created some FontAwesomeIconViews and embed them in some Buttons(JavaFX).

The issue I had to face is changing fontAwesome icons to a rectangle when hovering mouse over the button.

enter image description here

FXML File is below(FXMLDocument,fxml)

<?xml version="1.0" encoding="UTF-8"?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@styles.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="test_fontawesome.FXMLDocumentController">
    <children>
        <Button fx:id="button" contentDisplay="TOP" layoutX="44.0" layoutY="41.0" onAction="#handleButtonAction" text="Click Me!" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="40.0">
         <graphic>
            <FontAwesomeIconView fill="BLUE" glyphName="CUT" />
         </graphic></Button>
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <Button fx:id="button1" contentDisplay="TOP" layoutX="183.0" layoutY="41.0" onAction="#handleButtonAction" text="Click Me!" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="40.0">
         <graphic>
            <FontAwesomeIconView fill="BLUE" glyphName="PLUS" />
         </graphic>
      </Button>
    </children>
</AnchorPane>

CSS is file below(styles.css)

.root {
    -fx-font-size: 12px ;
}

Just preview it on scene builder, the issue will appear!

If you want the source code, get it from here.

Lakshitha Kanchana
  • 844
  • 2
  • 12
  • 32
  • 1
    Are you sure the button displays the same glyph when hovered over? This looks like a character issue, not a size issue. Check the CSS for `:hover`. – Mr Lister Jan 31 '17 at 07:12
  • Yes I am! I did not modified any css hover events in the default modena.css I have edited my question by adding my fxml and css files. Just preview it on scene builder after linking fontawesomefx-8.9.jar to the scene builder. I also included sample netbeans project having this issue. – Lakshitha Kanchana Jan 31 '17 at 09:29

3 Answers3

9

i had the same issue sometime back .. i remember adding the following line to my css file fixed the issue.

.glyph-icon{ -fx-font-family:"Material Design Icons"; }

Looks like your are using FontAwesome icon , may be try with the appropriate font family for that.

  .glyph-icon{ -fx-font-family:"FontAwesome"; }
user68883
  • 828
  • 1
  • 10
  • 26
2

You should consider to switch to the latest version of FontAwesomeFX. Yesterday I released 8.14: http://www.jensd.de/wordpress/?p=2579 8.14 comes with a fix of these resizing issues!

Jens Deters
  • 21
  • 1
0

If you change the font-size, you must set the font-family for icon.

.glyph-icon {
  -fx-font-size: 15px;
  -fx-font-family: "FontAwesome"; /* or Material Design Icons*/
}

This fix my issue! ;)

ivanoklid
  • 81
  • 1
  • 4