Skip to content

Adding Icons

Jump to bottom
Alexander von Trostorff edited this page Jul 11, 2020 · 1 revision

How to add icons

We changed the way on how to add icons in July 2020. You are supposed to an SVG path in the icons.css and make the icon holding pane with the corresponding style class. So how do u get such a SVG path:

You can get the SVGPath string from icomoon: icomoon

Then add it in the icons.css similar to this:

.inbox-icon {
  -fx-shape: "M17.896,12.706v-0.005v-0.003L15.855,2.507c-0.046-0.24-0.255-0.413-0.5-0.413H4.899c-0.24,0-0.447,0.166-0.498,0.4L2.106,12.696c-0.008,0.035-0.013,0.071-0.013,0.107v4.593c0,0.28,0.229,0.51,0.51,0.51h14.792c0.28,0,0.51-0.229,0.51-0.51v-4.593C17.906,12.77,17.904,12.737,17.896,12.706 M5.31,3.114h9.625l1.842,9.179h-4.481c-0.28,0-0.51,0.229-0.51,0.511c0,0.703-1.081,1.546-1.785,1.546c-0.704,0-1.785-0.843-1.785-1.546c0-0.281-0.229-0.511-0.51-0.511H3.239L5.31,3.114zM16.886,16.886H3.114v-3.572H7.25c0.235,1.021,1.658,2.032,2.75,2.032c1.092,0,2.515-1.012,2.749-2.032h4.137V16.886z";
}

Or from the source code of SVGs. https://raw.githubusercontent.com/FAForever/Art-Assets/master/FAF-Logo.svg Or build it yourself: https://yqnn.github.io/svg-path-editor/

-fx-shape will apply the shape to whatever component you choose. If it's a button, the button will have the SVG shape. We apply it to Regions like and use this region as the graphic for the button.

The annoying thing about it is that either you set -fx-scale-shape: false, resulting in the "original" size being used (as specified in the SVGPath), which is rarely what you want. Or you set -fx-scale-shape: true resulting in the shape being adjusted to the region's size - without keeping the aspect ratio. So for each icon the dimensions must be specified.

Clone this wiki locally