JavaFX中的彩色的图标字体 [英] Colored Icon Font in JavaFX

问题描述

我有一个JavaFX应用程序，我想在其中使用一些图标.当前，我解析所有可能带有图标的文本，这些字符串中包含特定字符串和字符(例如:icon:")，并构建TextFlow，在其中将匹配的关键字替换为图像.然后，我将TextFlow作为图形显示在Label/TextField/etc中.我觉得这很草率.有更好的解决方案吗?

I have a JavaFX application in which I would like to use a few icons. Currently, I parse all text that might have an icon in it for a specific string a characters, for example ":icon:", and I build TextFlow in which I replace the matched keywords with an image. Then I just display the TextFlow as a graphic within the Label/TextField/etc. This feels very sloppy to me. Is there a better solution?

我想使用一种自定义字体，该字体用我要使用的少量图标替换一些unicode字符，但是图标必须带有颜色是必不可少的.这可以用字体完成吗?我可以使用CSS为文本的特定字符上色吗?我在这里完全走对了吗?

I would like to use a custom font which replaces a few unicode characters with the small number of icons I want to use, but it is essential that the icons have color in them. Is this something that can be done with a font? Can I use CSS to color specific characters of text? Am I on the right path here at all?

推荐答案

您可能希望为此使用网络字体.

You may wish to use a web font for this.

此示例使用 Google物料设计图标字体.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class MixedTextAndIconFonts extends Application {
    @Override public void start(Stage stage) {
        Text i = new Text("I");
        Text love = new Text("\uE87D");
        Text u = new Text("you");
        i.setStyle("-fx-font-family: \'Indie Flower\'; -fx-font-size: 80; -fx-fill: forestgreen;");
        love.setStyle("-fx-font-family: \'Material Icons\'; -fx-font-size: 60; -fx-fill: firebrick;");
        u.setStyle("-fx-font-family: \'Indie Flower\'; -fx-font-size: 80; -fx-fill: forestgreen;");

        TextFlow textFlow = new TextFlow(
                i,
                love,
                u
        );
        textFlow.setStyle("-fx-padding: 20px; -fx-background-color: azure;");

        Scene scene = new Scene(textFlow);
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Indie+Flower");
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Material+Icons");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) { launch(args); }
}

作为一个快速示例，我内联了样式，但是对于真实"应用程序，您可能会使用外部CSS样式表和有意义的常量名称作为要包含的图标字形的unicode代码点.

For a quick sample, I inline the styles, but for a "real" app, you would probably use an external CSS stylesheet and meaningful constant names for the unicode code points of the icon glyphs you wish to include.

更多资源

如果您在网络上搜索其他类似资源，例如 fontawesomefx ， icon8网络字体转换指南和 icomoon.io .

There are other similar resources available on the web if you search for them, such as fontawesomefx, icon8 webfont conversion guide and icomoon.io.

这篇关于JavaFX中的彩色的图标字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！