Reusing standard icons for custom tiles in Dynamics Marketing

cj-add-child-tileOne of my last projects required the creation of several custom tiles for Dynamics Marketing Customer Journeys. As you know, to create custom tile, you need to configure some XML and CSS files. You need to provide information about CSS font-family, which will be used to extract icons and some other parameters. Rather than creating and hosting my own CSS, I decided that it would be nice to check if I can reuse exiting font-family. Dynamics Marketing has already some tiles, so let’s see how to reuse them.

In case you need some more information on how to create custom tiles, you can quickly check Microsoft documentation on this topic: Create a custom channel for the customer journey. Or my example, which contains all needed components including plugin from my git hub repository: Custom tile example for Dynamics Marketing. Now let’s focus on the topic of the article.

First of all, I did some research and realized that Microsoft is using the following CSS class: CCFSymbolFont. This CSS class is referencing font-family CRMMDL 2.

Knowing the name of the font-family file, you can extract it.CRMMDL2

Here is your file. Of course, to have this file, you need to open a customer journey with some tiles.

The next step is to extract this file and use any free online font file viewer to check available icons and their numbers. Then number should be later used in the CSS file to define which image from the font should be used in custom tile.

I recommend using the font drop.  Here is the link to the service: Font Drop!

icnons

Above, you can see some of the icons. To get the number, just hover the mouse above the image.

The last part is properly configuring the pair XML and CSS. More about these two files you can read in documentation: Step 3: Configure the tile for custom channel.

Please also check as example my configuration files:

1. sample_SpecialTileCustomerJourneyDesignerTileConfig.xml

2. sample_SpecialTileCustomerJourneyDesignerTileConfig.css

As you see from the files above I’m using standard CSS and providing the number which I got from the Font Drop application.

Leave a Reply