Legacy Product

Fusion 5.4

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.