Product Selector

Fusion 5.11
    Fusion 5.11

    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.