Task Styling: Custom Icons

This page provides a walkthrough on how to upload and add icons to task listings in the advocate-facing task page.

Icon Requirements 

We recommend the icons themselves being be at least 150px by 150px transparent PNGs for best visual performance.

Your team may already have pre existing icons that can be repurposed for Duel.

However, depending on task requirements you may need to create some additional. 

Adding Custom Icons to Duel Tasks

1. Navigate to Members > Group Profiles > Select appropriate group > Styles
2. Scroll down and (if unchecked) select 'App pages custom styles'
3. Click 'Find media' and upload your icons
4. Once uploaded copy and paste the CSS below into the custom styles section

5. .bp-mobile-up .preview.-label-icon .preview__content {
       padding-left: 51px;
       background-image: url(https://pathtoimage.jpg);
       background-repeat: no-repeat;
       background-size: 38px;
       background-position: left center;
       }
   .bp-mobile .preview.-label-icon .preview__h1 {
       padding-left: 53px;
       background-image: url(https://pathtoimage.jpg);
       background-repeat: no-repeat;
       background-size: 38px;
       min-height: 38px;
       }

6. Now head back to the file manager (click find media) and copy the URL of the icon you'd like to add, replace the https://pathtoimage.jpg in both sections of the code, keep the brackets in place
7. Now give the icon a name so you can link it to a task. Replace the text icon with a unique label eg -facebook 
8. Once this is set up don't forget to save bottom right and head to your task listing. Find an appropriate task and open it up. Navigate to labels and this is where you add in the label specified previously eg facebook
   
9. Once saved this icon will now be visible in the front end on the task listings page

Inbuilt Instagram & Facebook Icons

Replace the background image url() portion of the above code with var() instead

    background-image: var(--brandingInstagramLogo);

    background-image: var(--brandingFacebookLogo);

Duel Provided Icons

If you do not have the ability to create your own icons, you can take advantage of the icons provided by Duel. To learn how to use these icons, watch the short video below.