Creating Custom Icons in CKFinder

The aim of this article is to show you how customize CKFinder UI with your own icons.

Replacing Default Icons

By default CKFinder is using SVG icons.

Both default skins included in CKFinder 3 provide their own sets of icons:

• The moono skin – skins/moono/icons.css
• The jquery-mobile skin – skins/jquery-mobile/icons.css

It is, however, possible to override the set of icons used by CKFinder thanks to the config.iconsCSS option.

Enabling Additional jQuery Mobile Icons

If for any reason you would like to use jQuery Mobile icons, you can instruct CKFinder to load an additional CSS file with jQuery Mobile icons using the config.jqueryMobileIconsCSS option.

Note that setting config.jqueryMobileIconsCSS will have no effect on the icons used by CKFinder itself, because CKFinder is using icon names prefixed with ckf- to avoid the situation where setting config.jqueryMobileIconsCSS would suddenly replace a subset of plugins in the toolbar.

By enabling this additional CSS file you get the possibility of using jQuery Mobile iconset in your custom plugins. Pointing CKFinder to a huge CSS file just to use one icon might be an overkill, so if you need to add just one or two icons, read below.

Adding a Custom Icon

Adding a single new icon to the application is quite simple.

In order to add a star icon, set the following CSS:

.ui-icon-star:after {
    background-image: url('/path/to/star.svg');
}

As new icons are usually introduced by plugins together with new buttons (or context menu items), plugins have a dedicated method to inject CSS to CKFinder: addCss.

Example

For a complete sample of a plugin that provides its own icon and uses it in the toolbar button and in the context menu, check the plugin called CustomButton in the CKFinder Docs Samples repository.

About Icons

• Icons can be either loaded from a URL or can be embedded directly in the stylesheet using data URI scheme.
• Icon class name should respect the naming convention of icons in jQuery mobile.