1. Home
  2. Modules
  3. Standard Experiences
  4. Code Snippets for Customizing Icons Within a Target Track’s Flow Promoter

Code Snippets for Customizing Icons Within a Target Track’s Flow Promoter

The following script can be used to update the icons that you see within the flow promoter of PathFactory Target Tracks. The icons are dependent on media types including PDF, video, webpage and image. This provides the ability for further branding alignment within your PathFactory Experiences. 

To see more examples of code snippets, read Frequently Used External Code Snippets to Personalize Your PathFactory Experiences.

See This Script In Action

Where to place the script?

This script can be added through your External Code library and you can find a step by step guide on how to do so in our article Using External Code. The location can be set to ‘Head Tag’ and be applied to any PathFactory track with our Flow Promoter enabled. 

Codes that are bolded are sections of the code that you will need to replace URLs to the icons that you are intending to appear in the track. Codes that are underlined are the associated media types that the icons are dependent on. This includes: 

  • globe : webpage
  • play-circle: video
  • file-pdf: pdf
  • file-image: image

Code snippet

<style>

i.fa.fa-globe:before {

    content: ” “;

    background-image:

    url(‘[insert image url]‘); /*<–replace with preferred icon*/

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    height:25px;

    width:25px;

    display: block;

}

i.fa.fa-play-circle-o:before {

    content: ” “;

    background-image:

    url(‘[insert image url]‘);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    height:25px;

    width:25px;

    display: block;

}

i.fa.fa-file-pdf-o:before {

    content: ” “;

    background-image:

    url(‘[insert image url]‘); /*<–replace with preferred icon*/

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    height:25px;

    width:25px;

    display: block;

}

i.fa.fa-file-image-o:before {

    content: ” “;

    background-image:

    url(‘[insert image url]‘); /*<–replace with preferred icon*/

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    height:25px;

    width:25px;

    display: block;

}

</style>

Views: 12

Updated on July 27, 2023

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
CONTACT SUPPORT