Using Custom Icons

Personalizing your Digital Experience Portal icons is a great way to identify the Portal with your company's brand, making it uniquely yours.

This topic covers everything you need to know in order to use custom icons.

What files do you need?

The following is a recommended best practice for structuring a file:

Copy

+-- customIcon
        |   +-- css
        |       +-- customIcon.css
        |   +-- font
        |       +-- customIcon.eot/ttf/woff/woff2/svg
        |   +-- customIcon.js

You will need your font files (e.g., .eot, .woff, .woff2, etc.). Once you have the font files, import them in your css file and make sure to add the icon classes.

IMPORTANT! FintechOS does not support spinning icons or any sort of animated icons if the animation is done with a separate class.

.css file

Copy

@font-face {
        font-family: 'customIcon';
        src: url('../font/customIcon.eot?48188603');
        src: url('../font/customIcon.eot?48188603#iefix') format('embedded-opentype'),
        url('../font/customIcon.svg?48188603#fontello') format('svg');
        font-weight: normal;
        font-style: normal;
}
[class^="customIcon-"]:before, [class*=" customIcon-"]:before {
        font-family: "customIcon";
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .2em;
        text-align: center;
 
        /* For safety - reset parent styles, that can break glyph codes*/
        font-variant: normal;
        text-transform: none;
 
        /* fix buttons height, for twitter bootstrap */
        line-height: 1em;
 
        /* Animation center compensation - margins should be symmetric */
        /* remove if not needed */
        margin-left: .2em;
 
        /* you can be more comfortable with increased icons size */
        /* font-size: 120%; */
 
        /* Uncomment for 3D effect */
        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.customIcon-happy:before { content: '\e800'; } /* '' */
.customIcon-wink:before { content: '\e801'; } /* '' */
.customIcon-unhappy:before { content: '\e802'; } /* '' */
.customIcon-sleep:before { content: '\e803'; } /* '' */
.customIcon-thumbsup:before { content: '\e804'; } /* '' */
.customIcon-devil:before { content: '\e805'; } /* '' */
.customIcon-surprised:before { content: '\e806'; } /* '' */
.customIcon-tongue:before { content: '\e807'; } /* '' */
.customIcon-coffee:before { content: '\e808'; } /* '' */
.customIcon-sunglasses:before { content: '\e809'; } /* '' */
.customIcon-displeased:before { content: '\e80a'; } /* '' */
.customIcon-beer:before { content: '\e80b'; } /* '' */
.customIcon-grin:before { content: '\e80c'; } /* '' */
.customIcon-angry:before { content: '\e80d'; } /* '' */
.customIcon-saint:before { content: '\e80e'; } /* '' */
.customIcon-cry:before { content: '\e80f'; } /* '' */
.customIcon-shoot:before { content: '\e810'; } /* '' */
.customIcon-squint:before { content: '\e811'; } /* '' */
.customIcon-laugh:before { content: '\e812'; } /* '' */
.customIcon-wink2:before { content: '\e813'; } /* '' */
.customIcon-spin1:before { content: '\e830'; } /* '' */
.customIcon-spin2:before { content: '\e831'; } /* '' */
.customIcon-spin3:before { content: '\e832'; } /* '' */
.customIcon-spin4:before { content: '\e834'; } /* '' */
.customIcon-spin5:before { content: '\e838'; } /* '' */
.customIcon-spin6:before { content: '\e839'; } /* '' */
.customIcon-firefox:before { content: '\e840'; } /* '' */
.customIcon-chrome:before { content: '\e841'; } /* '' */
.customIcon-opera:before { content: '\e842'; } /* '' */
.customIcon-ie:before { content: '\e843'; } /* '' */
.customIcon-crown:before { content: '\e844'; } /* '' */
.customIcon-crown-plus:before { content: '\e845'; } /* '' */
.customIcon-crown-minus:before { content: '\e846'; } /* '' */

There are tools you can use to generate custom icon fonts. We recommend you to use Fontello as it quickly builds everything you need to include vector images into your web pages and it also provides open-source artworks.

If you opt for using Fontello, after you select/upload the icons that you want to use, make sure that all the icons have the same prefix. You can accomplish this from the Customize Names tab.

Icons must the same "customIcon" prefix:

Copy

customIcon-happy
customIcon-wink
customIcon-unhappy
customIcon-sleep

Create the JavaScript file that will do the heavy lifting of delivering your icons into the platform:

Copy

! function ($) {
    if (!$.iconset_list || !$.iconset_list.length) {
            $.iconset_list = [];
    }
    /* Replace customIcon with your own icons family name */
    /* The way that the app adds your icon class to the icon container is this: class="iconClass iconClassFix-icon"
    /* The iconClass is not mandatory but we have it because some font families use it (ex. fontawesom). */
    $.iconset_customIcon = {
        iconFamily: "customIcon",
        iconClass: "",
        iconClassFix: "customIcon-",
        icons: ["happy", "wink", "unhappy", "sleep", "devil", "surprised", "sunglasses", "chrome", "opera", "ie"]
    }
    $.iconset_list.push('customIcon');
}(jQuery);

Files Location

Add the files to the following location: custom/customAssets/icons/customIconSet. If you have another custom folder path set up, add the files to the following location yourCustomFolder/customAssets/icons/customIconSet, where customIconSet is the folder containing your files.

NOTE If you add your files to a location other than the ones mentioned above, the icons will not be loaded.

Use custom icons

If you got all the needed files and you put them into the custom folder previously mentioned, in FintechOS Studio, from the menu, click Admin > Settings. On the General tab, scroll-down, select Use Custom Styles and in the Custom Styles Folder field, enter the name of the folder where you have the custom files located, if it is other than "custom".