How do you add the Configurable Map Viewer (CMV) widget icons like the screenshot below?

enter image description here

2 Answers 2


What I did to add Icons was add <i class="icon-large icon-globe"></i> to the title in the viewer.js

streetview: {
            include: true,
            id: 'streetview',
            type: 'titlePane',
            canFloat: true,
            position: 9,
            path: 'gis/dijit/StreetView',
            title: '<i class="icon-large icon-globe"></i>&nbsp;&nbsp;Google Street View',
            options: {
                map: true,
                mapClickMode: true,
                mapRightClickMenu: true

enter image description here

  • nice example of using Font-Awesome icons. I expect there's also a way to do that similarly within a CSS stylesheet for reuse within multiple applications.
    – tmcgee
    Jan 14, 2015 at 19:13

That screenshot looks like one of mine. ;)

These icons are added via css. Here is an example for the print widget:

#print_parent .dijitTitlePaneTextNode,
#print_parent_title {
    background-image: url('../js/gis/dijit/Print/images/print.png');

The two css classes shown are for the widget when configured as a titlePane or a floating widget type. Some of the images like the print one used in that screenshot are from located with the cmv widget. Many of the cmv core widgets do not have their icon in the widget's folder. In this case or for a custom widget, you would need to use your own collection of icon images.

Note that the example css above uses an image that is no longer used by the current version of CMV and will be removed in a future release. The Print widget now uses Font-Awesome icons so the css would need to change use Font-Awesome (I don't have an example of this) or point to your own icon images as noted above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.