Product Selector

Fusion 5.12
    Fusion 5.12

    Dynamically Adding Icons to Fields

    Dynamically Adding An Icon To A Field

    Sometimes you might want to dynamically prepend a field with an image or an icon depending on the value of a field or variable.

    This can easily be accomplished using a class attribute referencing a little bit of CSS, defined in your styles/includes/custom.less.

    For example, to dynamically add a 'type' image before a field:

    	[class*="field-icon-"] {
	    position: relative;
	    margin-left: 2em;
	}

	[class*="field-icon-"]:before {
	    position: absolute;
	    left: -30px;
	    bottom: 14px;
	    background-size: 20px 20px;
	    display: inline-block;
	    width: 20px;
	    height: 20px;
	    content: " ";
	}

	.field-icon-pdf:before {
        background-image: url('../assets/icon-pdf.png');
	}

	.field-icon-doc:before {
        background-image: url('../assets/icon-doc.png');
	}

    And in your view, use:

    <search:field name="type" ng-class="field-icon-{{result | fields:'type' | actual}}"></search:field>

    The CSS can easily be extended or adapted to add more icon types or change the position and size of the icon.