Not global CSS classes?

I have the code in a menu symbol that control classes.

I applied to other symbols, which should react together to classes. Ex:

sym.getSymbol(".indef").play ("indef-art");

This should be 4 symbols with the respective class to play at the same time, right?

Instead of this, either only 1 symbol plays, or they play in order when the button is clicked.

Thanks for your advice.

Hey g.bollmann,

I personally found that to use a class in the way you describe you must make a function for the class and then call this function: creation, for example participated

sym.playIndef = function() {}

sym.getSymbol(".indefl").play ();

}

then just call it when you want an all the symbols with the indefl class to play:

sym.playIndef ();

I would recommend personal the first way that I have described as I find that you can control the project

hope this has helped

Tags: Edge Animate

Similar Questions

  • Why not adding css class for table poster red border cell error?

    JavaFX 2.2.21 Java 7.21

    I'm trying to display a red border and a picture on a cell text when an error occurs.

    I took the address book example (example 12-11 http://docs.oracle.com/javafx/2/ui_controls/table-view.htm#CJAGAAEE).

    and also James D solution to my previous question.

    I find that adding a class of css error does not display the red border and the image.

    However, using setStyle this - but it is not preferable, because I want to put the border value by default once the error is corrected.

    In the example below, red border does NOT appear. The 'name' field was changed to salary and must display one error (red border and image) if other thing that an integer is entered.

    If you uncomment the setStyle lines, then it is displayed.

    Note: I use empty.png to erase the image of 'failure' because using - fx-background-image: none; somehow, did not.

    import javafx.application.Application;
    import javafx.beans.property.SimpleStringProperty;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.geometry.Insets;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.control.Label;
    import javafx.scene.control.TableColumn.CellEditEvent;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.VBox;
    import javafx.scene.text.Font;
    import javafx.stage.Stage;
    import javafx.beans.value.ChangeListener;
    import javafx.beans.value.ObservableValue;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.scene.control.Button;
    import javafx.scene.control.TableCell;
    import javafx.scene.control.TableColumn;
    import javafx.scene.control.TableView;
    import javafx.scene.control.TextField;
    import javafx.scene.control.cell.PropertyValueFactory;
    import javafx.scene.input.KeyCode;
    import javafx.scene.input.KeyEvent;
    import javafx.util.Callback;
    public class TableViewSample extends Application {
    
    
        private TableView<Person> table = new TableView<Person>();
        private final ObservableList<Person> data =
                FXCollections.observableArrayList(
                new Person("Gates", "46", "[email protected]"),
                new Person("Ellison", "25", "[email protected]"),
                new Person("McNealy", "1", "[email protected]"),
                new Person("Jobs", "0", "[email protected]"),
                new Person("Me", "0", "[email protected]"));
        final HBox hb = new HBox();
    
    
        public static void main(String[] args) {
            launch(args);
        }
    
    
        @Override
        public void start(Stage stage) {
            Scene scene = new Scene(new Group());
            stage.setTitle("Table View Sample");
            stage.setWidth(450);
            stage.setHeight(550);
    
    
            final Label label = new Label("Address Book");
            label.setFont(new Font("Arial", 20));
    
    
            table.setEditable(true);
            Callback<TableColumn, TableCell> cellFactory =
                    new Callback<TableColumn, TableCell>() {
                public TableCell call(TableColumn p) {
                    return new EditingCell();
                }
            };
    
    
            TableColumn firstNameCol = new TableColumn("First Name");
            firstNameCol.setMinWidth(100);
            firstNameCol.setCellValueFactory(
                    new PropertyValueFactory<Person, String>("firstName"));
            firstNameCol.setCellFactory(cellFactory);
            firstNameCol.setOnEditCommit(
                    new EventHandler<CellEditEvent<Person, String>>() {
                @Override
                public void handle(CellEditEvent<Person, String> t) {
                    ((Person) t.getTableView().getItems().get(
                            t.getTablePosition().getRow())).setFirstName(t.getNewValue());
                }
            });
    
    
    
    
            TableColumn salaryCol = new TableColumn("Salary");
            salaryCol.setMinWidth(100);
            salaryCol.setCellValueFactory(
                    new PropertyValueFactory<Person, String>("salary"));
            salaryCol.setCellFactory(cellFactory);
            salaryCol.setOnEditCommit(
                    new EventHandler<CellEditEvent<Person, String>>() {
                @Override
                public void handle(CellEditEvent<Person, String> t) {
                    ((Person) t.getTableView().getItems().get(
                            t.getTablePosition().getRow())).setSalary(t.getNewValue());
                }
            });
    
    
            TableColumn emailCol = new TableColumn("Email");
            emailCol.setMinWidth(200);
            emailCol.setCellValueFactory(
                    new PropertyValueFactory<Person, String>("email"));
            emailCol.setCellFactory(cellFactory);
            emailCol.setOnEditCommit(
                    new EventHandler<CellEditEvent<Person, String>>() {
                @Override
                public void handle(CellEditEvent<Person, String> t) {
                    ((Person) t.getTableView().getItems().get(
                            t.getTablePosition().getRow())).setEmail(t.getNewValue());
                }
            });
    
    
            table.setItems(data);
            table.getColumns().addAll(firstNameCol, salaryCol, emailCol);
    
    
            final TextField addFirstName = new TextField();
            addFirstName.setPromptText("First Name");
            addFirstName.setMaxWidth(firstNameCol.getPrefWidth());
            final TextField addSalary = new TextField();
            addSalary.setMaxWidth(salaryCol.getPrefWidth());
            addSalary.setPromptText("Last Name");
            final TextField addEmail = new TextField();
            addEmail.setMaxWidth(emailCol.getPrefWidth());
            addEmail.setPromptText("Email");
    
    
            final Button addButton = new Button("Add");
            addButton.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent e) {
                    data.add(new Person(
                            addFirstName.getText(),
                            addSalary.getText(),
                            addEmail.getText()));
                    addFirstName.clear();
                    addSalary.clear();
                    addEmail.clear();
                }
            });
    
    
            hb.getChildren().addAll(addFirstName, addSalary, addEmail, addButton);
            hb.setSpacing(3);
    
    
            final VBox vbox = new VBox();
            vbox.setSpacing(5);
            vbox.setPadding(new Insets(10, 0, 0, 10));
            vbox.getChildren().addAll(label, table, hb);
    
    
            ((Group) scene.getRoot()).getChildren().addAll(vbox);
            scene.getStylesheets().add(getClass().getResource("errorTextField.css").toExternalForm());
    
    
            stage.setScene(scene);
            stage.show();
        }
    
    
        public static class Person {
    
    
            private final SimpleStringProperty firstName;
            private final SimpleStringProperty salary;
            private final SimpleStringProperty email;
    
    
            private Person(String fName, String pay, String email) {
                this.firstName = new SimpleStringProperty(fName);
                this.salary = new SimpleStringProperty(pay);
                this.email = new SimpleStringProperty(email);
            }
    
    
            public String getFirstName() {
                return firstName.get();
            }
    
    
            public void setFirstName(String fName) {
                firstName.set(fName);
            }
    
    
            public String getSalary() {
                return salary.get();
            }
    
    
            public void setSalary(String fName) {
                salary.set(fName);
            }
    
    
            public String getEmail() {
                return email.get();
            }
    
    
            public void setEmail(String fName) {
                email.set(fName);
            }
        }
    
    
        class EditingCell extends TableCell<Person, String> {
    
    
            final String errorCSSClass = "error";
            private TextField textField;
    
    
            public EditingCell() {
            }
    
    
            @Override
            public void startEdit() {
                if (!isEmpty()) {
                    super.startEdit();
                    createTextField();
                    setText(null);
                    setGraphic(textField);
                    textField.selectAll();
                }
            }
    
    
            @Override
            public void cancelEdit() {
                super.cancelEdit();
    
    
                setText((String) getItem());
                setGraphic(null);
            }
    
    
            @Override
            public void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
    
    
                if (empty) {
                    setText(null);
                    setGraphic(null);
                } else {
                    if (isEditing()) {
                        if (textField != null) {
                            textField.setText(getString());
                        }
                        setText(null);
                        setGraphic(textField);
                    } else {
                        setText(getString());
                        setGraphic(null);
                    }
                }
            }
    
    
            private boolean validate(String text) {
                try {
                    Integer.parseInt(text);
                } catch (NumberFormatException ne) {
                    return false;
                }
                return true;
            }
    
    
            private void createTextField() {
                textField = new TextField(getString());
                textField.setMinWidth(this.getWidth() - this.getGraphicTextGap() * 2);
                textField.focusedProperty().addListener(new ChangeListener<Boolean>() {
                    @Override
                    public void changed(ObservableValue<? extends Boolean> arg0,
                            Boolean arg1, Boolean arg2) {
                        if (!arg2) {
                            commitEdit(textField.getText());
                            boolean valid = validate(textField.getText());
                            if (!valid) {
                                if (!getStyleClass().contains(errorCSSClass)) {
                                    getStyleClass().add(errorCSSClass);
                                }
    //                            setStyle("-fx-border-color: red; -fx-background-image:url('fail.png'); -fx-background-repeat: no-repeat; -fx-background-position: right center;");
                            } else {
                                getStyleClass().remove(errorCSSClass);
    //                            setStyle("-fx-border-color: gray;  -fx-background-image:url('empty.png');");
                            }
                        }
                    }
                });
                textField.setOnKeyReleased(new EventHandler<KeyEvent>() {
                    @Override
                    public void handle(KeyEvent event) {
                        if ((event.getCode() == KeyCode.ENTER)) {
                            commitEdit(textField.getText());
                            boolean valid = validate(textField.getText());
                            if (!valid) {
                                if (!getStyleClass().contains(errorCSSClass)) {
                                    getStyleClass().add(errorCSSClass);
                                }
    //                            setStyle("-fx-border-color: red; -fx-background-image:url('fail.png'); -fx-background-repeat: no-repeat; -fx-background-position: right center;");
                            } else {
                                getStyleClass().remove(errorCSSClass);
    //                            setStyle("-fx-border-color: gray;  -fx-background-image:url('empty.png');");
                            }
                        } else if (event.getCode() == KeyCode.ESCAPE) {
                            cancelEdit();
                        }
                    }
                });
            }
    
    
            private String getString() {
                return getItem() == null ? "" : getItem().toString();
            }
        }
    }
    
    
    

    errorTextField.css

    root {
        display: block;
    }
    
    
    .text-field.error {
    -fx-border-color: red ;
      -fx-border-width: 2px ;
      -fx-background-image:url('fail.png');
      -fx-background-repeat: no-repeat;
      -fx-background-position: right center;
    }
    .text-field {
    -fx-border-width: 0px ;
    -fx-background-image:url('empty.png') ;
       -fx-background-repeat: no-repeat;
      -fx-background-position: right center;
    }
    
    
    

    The css Setup is fine. The selector

    .a.b
    

    Selects elements that have the two class a and class b. Note that in this example, you set the style on the table cell class, not on the text field. So you have the selector

    .table-cell.error
    

    You can select the cells of a table with text fields that also have the style class 'mistake' set with

    .text-field.error, .table-cell.error
    
  • Attribute of RoboHelp 8 &amp; CSS class

    I tried to use the CSS class attributes, but it seemed to be recognized by Robohelp 8. Here is an example of my code:

    My external style sheet:

    {Test}

    Width: 562px;

    height: 16px;

    text-align: center;

    do-family: Arial, Helvetica, without serif.

    make-weight: bold;

    color: #ffff00;

    }

    Test1 {}

    background-color: #00900;

    }

    Test2 {}

    background-color: #008000;

    }

    In my file:

    < link rel = "Stylesheet" href = "layout.css" type = "text/css" / > "

    < div class = "Test1 Test" >

    I type something here

    < / div >

    The text I type is rendered but none of the formatting.  What I am doing wrong?

    Does anyone know if there is a problem with Robohelp 8 do not support CSS classes?

    Thank you!

    Post edited by: Lakooli

    Hello

    Add a period (.) before the class definitions in your css:

    . -> All items that have the test of the test class

    Or even better:

    div. Test-> DIV element only have test class

    Take a bow

    Willam

  • Global CSS definitions

    HY

    I wonder if it is possible to declare some custom styledefinitions "global".
    Classes own style not global, because I know how to do this.
    In addition, I want to do some - fx-customColor: #666666;
    and use this definition of a button:
    button {}
    -fx-background-color:-fx-customColor;
    }

    I know that there is a color - fx where all colors can be derived, but I need to set
    more than one custom color ;)

    BR
    Harry

    An interesting thing is that you can override the colors defined in a scope in a specific way.

    For example, in caspian.css - fx-base in the .root style class is defined as a base - fx: #d0d0d0; giving it a clear gray color (which is horrible IMO that the gray color themes look so 90s).
    But, you can define a custom style sheet and it is .root established - fx-base: antiquewhite and then everything is this beautiful antique white color, and not a metallic silver color.
    Now if you want that all your buttons in fishing and your scroll bars in gold, under the key defined style - peachpuff and .scroll-bar set - fx fx-base - base EEE8AA.
    You can also define a button of bigredeasy styleclass with a base - brick refractory and - fx-font-size of 5th fx and no matter which button you assign styleclass have nice big letters on a red background.
    This trick also works for inline styles, so if you only want to create a bigredeasy button, rather than use a styleclass you button.setStyle ("base - fx -: refractory brick;") fonts - fx - size: 5th; ") in the code.

    The great thing about all this is that when you redefine - fx-base the rest of the Caspian Sea in is derived, including all gradients, the coloration of the turn, the overview and the coloring State pressed etc. These means you don't lose all the Visual candy (which is part of the UX of the whole user interface) style default css as you would if you did instead of button.setStyle ("background - fx - color: brick" "");

    So, for your example, I would say:

    .root {
      -fx-custom-color: #666666;
    }
    
    .button {
      -fx-base: -fx-custom-color;
    }
    
  • Custom icon in the icon of the CSS class attribute

    Hello world

    Apex version: 5.0.1

    Universal theme

    Oracle version: 11 GR 2

    I created a custom page, sign in as the picture below. In the icon attribute set spinner fa temporarily CSS classes, instead I need to put a custom, icon that I made icon. I don't know where to add the new icon? I've added an icon in the shared components > files to workspace static but I can not reference an Image of workspace of the class CSS of the icon attribute.


    Can someone tell me where and how to create a new icon for use with the attribute of CSS icon classes?

    Thank you

    customlogin.PNG

    The CSS style related to the use of the property of the icon of the CSS Classes is set up specifically to manage the icons great fonts. Rather than trying to substitute these for host your custom image, it's easier not to specify a class icon CSS and a simple CSS rule allows you to set your picture as a background on the header area of connection:

    .t-Login-header {
      background: url(&WORKSPACE_IMAGES.logo_GUATEFAC.ico) top center no-repeat;
    }
    

    This can be applied on the page of connection Inline CSS property, either as a custom theme CSS Roller rule.

    Also note that even if the property is called "Icon of CSS Classes", the ICO file format is not normally used and in fact may not be returned by all browsers. (Fonts Awesome 'icons' are in fact a vector font glyphs). In this case you would be advised to use a version of the superior image quality of your logo in PNG format.

  • Why the live preview is not displayed CSS code?

    Hello

    Preview live is supposed to show you what your website will look like. This is how it is supposed to work. How is it that when I add the CSS code in my html file, it does not add the design of live preview? Should I tweet a framework. For your information, I use the Dreamweaver application more up-to-date, running on a Macbook Pro retina run 13 inches at the beginning 2015 release the last OS X El Capitan. Any comments will be nice, I was very interested in the preview live and bought Adobe Creative cloud because of this feature.

    Thank you.

    DW favours incorporated only if they come after your external style sheet links.

    If still not appear embedded styles, check your code errors.  Also make sure that the CSS classes and ID is added to your HTML markup.

    NOTE:

    • Design mode is not capable of reproducing some advanced CSS.
    • Live View is better, but not perfect for all styles of rendering.
    • Overview in real browsers, it is still the best way to check your work.

    Nancy O.

  • Plugin element type: css-class of APEX interface is lost...

    Hi guys!

    It is still a matter of plugin.

    And before that: is there a forum dedicated to issues around the APEX plugin development? I don't know http://www.apex-plugin.com/ where you can share, but not discuss your own little ones. And other sites are more commercial.

    Perhaps someone here can also answer my current question:

    In the developer interface, you have the form HTML CSS Classes element and attributes of the HTML Formfields in the section of the element .

    The an element type plugin interface (among others) carries parameter apex_plugin.t_page_item.element_attributes.

    Documentation:APEX_PLUGIN

    Now the problem is that the values I enter in the field of the HTML form element attributes are passed to plugin procedure, the values of the Class CSS of HTML form elements get lost. And I couldn't find any other setting for this field of class.

    That's how I made of the element:

       v_html := '<input type="text" name="@name@" id="@id@" width="@width@" @attr@>';
        v_html := replace ( v_html, '@name@',     apex_plugin.get_input_name_for_page_item(false) );
        v_html := replace ( v_html, '@id@',       p_item.name);
        v_html := replace ( v_html, '@width@',    p_item.element_width );
        v_html := replace ( v_html, '@attr@',     p_item.element_attributes );
        sys.htp.prn(v_html);
    
    
    

    ... and so far every thing works. Certainly I can include my own class here, but I often insert a class at the level of application development, and I imagine that others do also.

    I also tested other plugins of item type, and did not see how the css class I spend there, reached the HTML.

    I forgot something or is it a flaw in the development of a plugin?

    Thank you and best regards,

    Tobi

    Work with 4.2.1

    Hey Tobi,

    You can find this setting in p_item.element_css_classes. I just checked out apex.oracle.com (4.2.4) and this attribute is passed correctly,

    Peter

  • Command of the CSS class

    Hello

    I use 11.1.1.6 JDeveloper and Oracle ADF Skin Editor 11.1.2.3. I have browsed the sites of the community and not found a question / answer on the question, I am facing.

    I was able to create custom in my custom appearance CSS classes and apply them to my project WCP via JDeveloper. Personalized my CSS class (.) HeaderTitle1) is applied to the element of the ADF (outputText) through the styleClass property. (In my browser), I see that my custom class and the integrated ADF class are applied to the outputText component.

    The problem is the ADF integrated class to take my class. Based on CSS rules (see This example), it's because the class of the ADF is set far in the CSS file (or later if loaded in a separate file). I looked at the CSS file in the Chrome developer tools, and I see only 1 CSS file and my custom CSS classes are in the middle of the file with the ADF classes before and after them.

    Question: Is there a way I can control the order of statements in the CSS file? How can I make sure that my custom CSS classes will take precedence?

    Thank you!

    Of course, Alejandro. This is actually not an outputText (which is one of our use cases), but by applying a custom style for the goLink component that gives us grief.

    Here is my css:

    .HeadingTitle1
    {
      font-weight: bold;
      font-size: 24px;
      text-transform: uppercase;
    }
    

    Here's how I'm referencing this css in my .jsp file:

    
    

    The result (via Google Chrome tools):

    Edit Address
    

    Hmm, actually, looks like I solved my problem. Looking at the source of the CSS file, I can see that the HeadingTitle1 class is set AFTER the class af_goLink (which contains the properties I'm afraid with):

    .af_goLink
    {
         font-size: 15px;
    }
    ...
    .HeadingTitle1
    {
      ...
    
      font-size: 24px;
      ...
    
    }
    

    Based on this demo CSS, I thought that the problem was that the class af_goLink defined later in the CSS file, so that it outweighs my custom CSS class, but it looks that it behaves the way that I need / expect.

    Not sure why I wasn't seeing it all along. Thanks for the help, Alejandro and Frank.

  • CSS = class"? ' AutoComplete

    Hello

    "Can you tell me when the automatic full funtion will work when you type class =" at the present time, you must remember the css classes, I would use the product.

    See you soon,.

    David

    It's on media - https://trello.com/c/oldLUN3g - order book so it has not yet been applied, but it is low on the order book. Don't know when exactly he would make his way at the edge of Code, but it will be media first (edge Code being just a distribution of media).

    = Ryan

    [email protected]

  • stylesheets with CSS classes included in possible springboard?

    Hey there.
    Is it possible to include a CSS stylesheet in my springboard custom-made?
    I can include them in features, but don't know how to import external files to the custom springboard (page amx)...

    Kind regards
    Pascal

    Hi, Pascal, in fact I would like to add to this so that everyone can see it.

    Yes, you can use custom CSS springboard and custom login screen. If they are HTML based, you would simply include the CSS with your HTML page. If these are AMX based, you will need to follow the SkinningDemo in order to extend or add new style classes. Look in the ApplicationController - Sources of the Application project - META-INF-adfmf - skins.xml file. It contains references to additional CSS classes that can be used in the entire application. Springboard and login page being application-level objects, these CSS/count files must be added to the project by the sample controller App.

    Quick explanation of the file adfmf - skins.xml because I was not clear in the call this morning. You can modify the existing CSS classes, delivered with the framework, or add new CSS classes for the frame. To change (or extend) - for example, to replace outputText color of the Red header facet, first add this to the file skins.xml


    mobileFusionFx.iOS
    mobileFusionFx
    mobileFusionFx
    CSS/myCSS.CSS

    Then in your file mycss.css, need you:

    . AMX-panelPage-facet-header > {.amx-outputText
    color: Red;
    }

    If you want to add a new CSS class, and then use it in your application, you must:


    mobileFusionFx
    CSS/myaddedcss. CSS

    And the myaddedcss.css would have the following new class that you can now use in your application:

    . {MyCSSClass}
    color: Green;
    }

    This would work against the entire application as a springboard and custom login app generated using AMX.

    Thank you

    Joe Huang

  • How to use the CSS class

    Dear friends,

    I use Apex 4.1. I did a CSS class. I just want to know where I have to paste the code below and where I call and how?


    I wrote this in the properties-> header HTML PAGE

    < style type = "text/css" >
    MyClass
    {
    Width: 200px;
    color: orange;
    background-color: #CCCCFF;
    }
    < / style >




    the call above field-> on the attributes of HTML table cell. class = 'MyClass '.

    but it does not work. Please help me where I am doing wrong. Thanks in advance.

    Concerning
    Kamran

    Hello

    I have cerated a sample APP (APPL_1) in my TEMP workspace:

    http://Apex.Oracle.com/pls/Apex/f?p=29601:1:844154738192245:

    You can identify yourself in my workspace (see for the source):
    workspace: APEX_DEMOVIC
    Login: demo
    Pass: demo

    It will be useful.

    Concerning

    J :D

  • Can you do the "Apply CSS Class" part of the greatest Editor?

    Hello...

    I was wondering - is it possible to enlarge the window of the editor "apply CSS Class '... It's TINY. (on the site of 200px)

    So I don't see a lot of classes...

    Screen Shot 2012-09-01 at 11.01.09 AM.png

    Cheers, Dave

    Hey Dave

    You could paste the lines for these CSS elements you have in the CSS but also how your loading the css.

    IF you have several CSS or CSS class items are in a @import (a file css etc) it will not work.

    Also before that, try to clear the cache, log out, clear the cookies from domain for the site and reconnect. That sort? If this isn't the case, then do the foregoing.

  • Off-site Global css file

    Hi-

    I don't primaraily not grow in Dreamweaver and I have a problem when you use the function of templates. I have a number of intranet sites that I would like to point to a 'global' css file in a folder at their level in the directory:

    /CSS
    /site1
    /site2
    /site3
    /SITE4

    So I put the templates to point to this file css outside of the site. However, every time I try and create a new file from the template, it calls telling me that this file is outside of the site and then creates a local path that obviously will not work.

    How can I work around this?

    Thank you.



    I also develops Intranet sites. Any time I want to make a link to a file that is not in my local site I need to change the path to an absolute address, i.e. http://folder/file_name?

  • Any ideas how to fix this code error: declaration of property not valid css to *.

    My mac guard getting hung up on some websites here, that's what appears on the Console error: declaration of property not valid css to the * and then cl css and about 4 numbers.

    Any ideas what's happening?

    Poorly coded Web page. What site?

  • How to set icon CSS classes

    Hello

    in my application, I would like to display our company logo (downloaded it s as a static application file) on the login page (with patterns of connection, as well for the region and the page). The logo must be placed above the header "Login" (as in the database).

    To do this I have to define an icon class CSS, right? How and where can I do this?

    Thank you in advance!

    LMK

    2997263 wrote:

    Thanks for your reply. I m using APEX 5.0 and the universal theme.

    1. turn your class icon in the Icon of CSS Classes in the appearance section of the region connection properties in the property editor.

    2. Add the following style sheet to connect Inline CSS property page in the property editor:

    .your-icon-class {
      background-image: url(&APP_IMAGES.your-image-filename);
      background-repeat: no-repeat;
    }
    

    Replace the class name and image filename as needed.

Maybe you are looking for