Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

This configuration option enables custom icons to be displayed in the Icon Selector Dialog in the Visual Designer. This dialog is used for the 'icon' property of the CSS Button, Graphic Button, and Icon widgets. Setting this configuration option will overwrite the default icons shipped with Profound UI. If you want to include the default shipped icons, you will need to include them in your defined list.

Below is an example:

pui["customIconList"] = {
    "icons": [{
        "type": "materialIcons",  // The type property is the unique key that this set will have 
        "title": "Material Icons", // The title property is the value that will be displayed in the dropdown list of the Icon Selector Dialog 
        "classList": {
            "regular": "pui-material-icons" // The classList property is an object that will take the key for the class and use a string for the value. The value will be the class name that will be applied. 
        },
        "icons": [{ 
            "icon": "3d_rotation",  // The icons property is an array that will hold all the icons for this set. Each index will be an object with an icon and classList property. 
            "classList": "regular"  // The icon property is the value for the icon. The classList property can be a string or an array holding the keys for classes for the icons. 
        },...]
	},
	{
		"type": "fontAwesomePro",
        "title": "Font Awesome Pro",
        "classList": {
            "brands": "font-awesome-pro-brands-class fa-",  
            "solid": "font-awesome-pro-solid-class fa-", // When the solid key is used, it will apply 'font-awesome-pro-solid-class fa-' + the icon value to the class of the widget. 
														 // So for the case of abacus, it will be 'font-awesome-pro-solid-class fa-abacus'
            "regular": "font-awesome-pro-regular-class fa-",
            "light": "font-awesome-pro-light-class fa-"
        },
        "icons": [{
            "icon": "abacus",
            "classList": ["solid", "regular", "light"]
        },...]

	}
}

An example list that includes the default icon sets shipped with Profound UI is attached at the bottom of this page, along with an example of a list that includes the Font Awesome Pro Icons v5.4.1.

Note: This option is available in Profound UI Version 6, Fix Pack 1.3 and later. 


Attachments:

Default Icons: Default Icon List

Default Icons with Font Awesome Pro: Default Icon List with Font Awesome Pro Icons *Note, the classList property may need to be updated to reflect the correct class for the Font Awesome Pro set. 

  • No labels