In older days of Siebel, If we need to add images on buttons then we must create Bitmaps & Html Icon Map to register that image.
And then add it to applet controls wherever we want it. But with IP 2014, all we need is 3-4 lines of CSS codes only. Actually we are not using images here, we will replace button with Icons using web fonts which is already installed with IP 2014.
Add Button in Tools as usual:
Dummy Button
Locate Button Class:
We need to find class of our button to apply css changes. Right- Click on button and do Inspect Element. Then locate class name and note it down. All Buttons must have a special class like [siebui-icon-methodname]. We are insterested in this class only.
Locate Button Class
Apply CSS change:
- Apply Font Family on our button class
- Apply Icon unique code on it
- Hide Button other html text & span
- Add other changes like color etc.
CSS Change
Thats all, Button replaced by sync Icon. We will have simple button in HI while this Icon in Open UI mode.
Unfortunately there is no list of Icons we can use or customize in IP 2014, its a big secret kept by Oracle. But we need not to worry. We can find tons of ICONS on web, install it and use wherever required.
Here is a small list of icons, I have extracted this from css file for you guys. These are class names which suggest icon names.
[su_accordion][su_spoiler title=”Click to see the code” style=”fancy”]
.siebui-icon-sync-alt::before {
content: "\e600"
}
.siebui-icon-home::before {
content: "\e601"
}
.siebui-icon-cart-alt::before {
content: "\e602"
}
.siebui-icon-expand::before {
content: "\e603"
}
.siebui-icon-contract::before {
content: "\e604"
}
.siebui-icon-edit-alt::before {
content: "\e605"
}
.siebui-icon-fin-application::before {
content: "\e69f"
}
.siebui-icon-household::before {
content: "\e6a0"
}
.siebui-icon-fin-account::before {
content: "\e6a1"
}
.siebui-icon-save-list::before {
content: "\e68e"
}
.siebui-icon-folder::before {
content: "\e68f"
}
.siebui-icon-folder-open::before {
content: "\e690"
}
.siebui-icon-save-alt::before {
content: "\e691"
}
.siebui-icon-save::before {
content: "\e692"
}
.siebui-icon-binoculars::before {
content: "\e693"
}
.siebui-icon-settings-alt::before {
content: "\e694"
}
.siebui-icon-debug::before {
content: "\e695"
}
.siebui-icon-reports::before {
content: "\e696"
}
.siebui-icon-dashboard::before {
content: "\e697"
}
.siebui-icon-target::before {
content: "\e698"
}
.siebui-icon-apply-list::before {
content: "\e699"
}
.siebui-icon-task::before {
content: "\e69a"
}
.siebui-icon-question::before,
.siebui-self-service .siebui-login-body .siebui-icon-help::before {
content: "\e69b"
}
.siebui-icon-info::before {
content: "\e69c"
}
.siebui-icon-login::before {
content: "\e69d"
}
.siebui-icon-logout::before {
content: "\e69e"
}
.siebui-icon-reset::before {
content: "\e67b"
}
.siebui-icon-tiles::before {
content: "\e67c"
}
.siebui-icon-mail::before {
content: "\e67d"
}
.siebui-icon-configure::before {
content: "\e67e"
}
.siebui-icon-switch::before {
content: "\e67f"
}
.siebui-icon-grid::before {
content: "\e680"
}
.siebui-icon-tile-grid::before {
content: "\e681"
}
.siebui-icon-log::before {
content: "\e672"
}
.siebui-icon-cart::before {
content: "\e673"
}
.siebui-icon-attachment::before {
content: "\e674"
}
.siebui-icon-checkbox-checked::before {
content: "\e675"
}
.siebui-icon-checkbox-unchecked::before {
content: "\e676"
}
.siebui-icon-checkbox-partial::before {
content: "\e677"
}
.siebui-icon-radio-checked::before,
.ui-icon-radio-on::before {
content: "\e678"
}
.siebui-icon-location::before {
content: "\e606"
}
.siebui-icon-airplane::before {
content: "\e607"
}
.siebui-icon-user::before {
content: "\e608"
}
.siebui-icon-delete::before {
content: "\e609"
}
.siebui-icon-cal-daily::before {
content: "\e66c"
}
.siebui-icon-cal-weekly::before {
content: "\e66d"
}
.siebui-icon-dollar::before {
content: "\e66e"
}
.siebui-icon-drilldown::before {
content: "\e66f"
}
.siebui-icon-query-assist::before {
content: "\e670"
}
.siebui-icon-query-cancel::before {
content: "\e671"
}
.siebui-icon-query-go::before {
content: "\e67a"
}
.siebui-icon-select-multi::before {
content: "\e682"
}
.siebui-icon-select::before {
content: "\e683"
}
.siebui-icon-cal-monthly::before {
content: "\e684"
}
.siebui-icon-calculator::before {
content: "\e685"
}
.siebui-icon-date::before {
content: "\e686"
}
.siebui-icon-print::before {
content: "\e687"
}
.siebui-icon-arrow-left::before {
content: "\e688"
}
.siebui-icon-arrow-right::before {
content: "\e689"
}
.siebui-icon-unlock::before {
content: "\e669"
}
.siebui-icon-lock::before {
content: "\e66a"
}
.siebui-icon-arrowsm-sort::before {
content: "\e66b"
}
.siebui-icon-camera::before {
content: "\e668"
}
.siebui-icon-bulkonboard::before {
content: "\e654"
}
.siebui-icon-zoom-in::before {
content: "\e655"
}
.siebui-icon-zoom-out::before {
content: "\e656"
}
.siebui-icon-arrowsm-fwd::before {
content: "\e657"
}
.siebui-icon-arrowsm-rev::before {
content: "\e658"
}
.siebui-icon-arrowsm-right::before,
.ui-icon-triangle-1-e::before {
content: "\e659"
}
.siebui-icon-arrowsm-play::before {
content: "\e65a"
}
.siebui-icon-arrowsm-left::before {
content: "\e65b"
}
.siebui-icon-arrowsm-first::before {
content: "\e65c"
}
.siebui-icon-arrowsm-last::before {
content: "\e65d"
}
.siebui-icon-arrowsm-bottom::before {
content: "\e65e"
}
.siebui-icon-arrowsm-top::before {
content: "\e65f"
}
.siebui-icon-arrowsm-up::before {
content: "\e660"
}
tabs-active::after {
content: "\e661"
}
.siebui-icon-wizard::before {
content: "\e662"
}
.siebui-icon-tv::before {
content: "\e663"
}
.siebui-icon-phone::before {
content: "\e664"
}
.siebui-icon-laptop::before {
content: "\e665"
}
.siebui-icon-bars::before {
content: "\e666"
}
.siebui-icon-signal::before {
content: "\e667"
}
.siebui-icon-barcode-query::before {
content: "\e653"
}
.siebui-icon-barcode-edit::before {
content: "\e651"
}
.siebui-icon-barcode-add::before {
content: "\e652"
}
.siebui-icon-arrow-up::before {
content: "\e650"
}
.siebui-icon-arrow-down::before {
content: "\e64f"
}
.siebui-icon-building::before {
content: "\e64e"
}
.siebui-icon-contract2::before {
content: "\e647"
}
.siebui-icon-invoice::before {
content: "\e648"
}
.siebui-icon-servicerequest::before {
content: "\e649"
}
.siebui-icon-prospective::before {
content: "\e64a"
}
.siebui-icon-newclient::before {
content: "\e64b"
}
.siebui-icon-closedaccount::before {
content: "\e64c"
}
.siebui-icon-play::before {
content: "\e64d"
}
.siebui-icon-pause::before {
content: "\e646"
}
.siebui-icon-minus::before {
content: "\e645"
}
.siebui-icon-barcode::before {
content: "\e643"
}
.siebui-icon-barcode-alt::before {
content: "\e644"
}
.siebui-icon-call-transfer::before {
content: "\e642"
}
.siebui-icon-undo::before {
content: "\e60a"
}
.siebui-icon-tools::before {
content: "\e60b"
}
.siebui-icon-toggle::before {
content: "\e60c"
}
.siebui-icon-text-rightalign::before {
content: "\e60d"
}
.siebui-icon-text-photo::before {
content: "\e60e"
}
.siebui-icon-text-list::before {
content: "\e60f"
}
.siebui-icon-text-leftalign::before {
content: "\e610"
}
.siebui-icon-text-italic::before {
content: "\e611"
}
.siebui-icon-text-indentright::before {
content: "\e612"
}
.siebui-icon-text-indentleft::before {
content: "\e613"
}
.siebui-icon-text-center::before {
content: "\e614"
}
.siebui-icon-text-bold::before {
content: "\e615"
}
.siebui-icon-text-attach::before {
content: "\e616"
}
.siebui-icon-tasks::before {
content: "\e617"
}
.siebui-icon-tasks-alt::before {
content: "\e618"
}
.siebui-icon-sync::before {
content: "\e619"
}
.siebui-icon-success::before {
content: "\e61a"
}
.siebui-icon-star::before {
content: "\e61b"
}
.siebui-icon-star-circle::before {
content: "\e61c"
}
.siebui-icon-sitemap::before {
content: "\e61d"
}
.siebui-icon-share::before {
content: "\e61e"
}
.siebui-icon-settings::before {
content: "\e61f"
}
.siebui-icon-services::before {
content: "\e620"
}
.siebui-icon-search::before,
.siebui-ecfg-form-control.siebui-ecfg-search-input+.siebui-ecfg-search-btn::before {
content: "\e621"
}
.siebui-icon-search-circle::before {
content: "\e622"
}
.siebui-icon-sales::before {
content: "\e623"
}
.siebui-icon-redo::before {
content: "\e624"
}
.siebui-icon-records::before {
content: "\e625"
}
.siebui-icon-quotes::before {
content: "\e626"
}
.siebui-icon-query-bookmark::before {
content: "\e627"
}
.siebui-icon-pinfolder::before {
content: "\e628"
}
.siebui-icon-pin::before {
content: "\e629"
}
.siebui-icon-pin-active::before {
content: "\e62a"
}
.siebui-icon-notification::before {
content: "\e62b"
}
.siebui-icon-map-location::before {
content: "\e62c"
}
.siebui-icon-invoices::before {
content: "\e62d"
}
.siebui-icon-inventory::before {
content: "\e62e"
}
.siebui-icon-info-circle::before {
content: "\e62f"
}
.siebui-icon-history::before {
content: "\e630"
}
.siebui-icon-help::before {
content: "\e631"
}
.siebui-icon-fleet::before {
content: "\e632"
}
.siebui-icon-error::before {
content: "\e633"
}
.siebui-icon-edit::before {
content: "\e634"
}
.siebui-icon-edit-active::before {
content: "\e635"
}
.siebui-icon-directions::before {
content: "\e636"
}
.siebui-icon-customer::before {
content: "\e637"
}
.siebui-icon-contacts::before {
content: "\e638"
}
.siebui-icon-communication::before {
content: "\e639"
}
.siebui-icon-close::before {
content: "\e63a"
}
.siebui-icon-close-circle::before {
content: "\e63b"
}
.siebui-icon-client::before {
content: "\e63c"
}
.siebui-icon-check::before {
content: "\e63d"
}
.siebui-icon-check-circle::before {
content: "\e63e"
}
.siebui-icon-chart-line::before {
content: "\e63f"
}
.siebui-icon-call-video::before {
content: "\e640"
}
.siebui-icon-call-transfer2::before {
content: "\e641"
}
.siebui-icon-call-outbound::before {
content: "\e68a"
}
.siebui-icon-calendar::before {
content: "\e68b"
}
.siebui-icon-book::before {
content: "\e68c"
}
.siebui-icon-away::before {
content: "\e68d"
}
.siebui-icon-appointments::before {
content: "\e6a2"
}
.siebui-icon-alert::before {
content: "\e6a3"
}
.siebui-icon-admin::before {
content: "\e6a4"
}
.siebui-icon-add::before,
.siebui-icon-createrecord::after {
content: "\e6a5"
}
.siebui-icon-actions::before {
content: "\e6a6"
}
.siebui-icon-accounts::before {
content: "\e6a7"
}
[/su_spoiler][/su_accordion]
Maybe in my next, I can give details on installing web fonts and get awesome fonts in our Siebel.
[su_divider]
@AskmeSiebel
6 comments for “How to replace Buttons with ICONS in Innovation Pack 2014”