How to change the Launcher Icon through CSS?

A launcher icon can be updated with your own image or with a Font Awesome icon (recommended). This has to be done using Campaign Themes, and the detailed steps are below:

Instructions to update launcher icon to a new Font Awesome icon (recommended)

1. You would have to choose one icon from this URL: https://fontawesome.com/icons?d=gallery and copy its Unicode as shown in the GIF below:

2. Navigate to Campaign Themes under the Campaigns drop-down in UserIQ and edit a theme by clicking into its name.

3. Now, click on the Launcher tab in that theme, and navigate to the Custom CSS section in that theme.

4. Paste the following CSS and insert your Font Awesome icon number in the place of 'f129′.

.uiq-fa-space-shuttle {
 visibility: hidden;
 transform: none !important;
}

.uiq-fa-space-shuttle:after {
 content: "\f129" !important;
 visibility: visible !important;
 font-size: 30px !important;
 margin-left: -30px;
}

If the Unicode for your new Launcher icon is 'f158′, you would then update

content: "\f129" !important;

to

content: "\f158" !important;

Once this is done, you can hit the „Apply CSS” button to visually see the changes to your Launcher Icon. Don’t forget to save your theme before exiting the editor.

*The CSS that we have provided above works best for our application but could not be a perfect fit for your web application as there could be other external factors (like your application CSS) that could be affecting this configuration.

If the CSS provided does not work as intended, we suggest you increase / decrease the font-size and margin-left values provided in our CSS to make sure the CSS provided above caters to your needs (This would be a trial & error process and you would have to go back and check in your app after every CSS change).

5. The last step would be to navigate to Campaigns -> All Campaigns -> Launchers Tab -> Edit your Launcher and update your Launcher to the theme that you just edited.

Note: If the launcher icon does not get automatically updated when you update the icon number and hit „Apply CSS” on Step 4, it means that we do not support that Font Awesome icon yet, and you would have to choose a different icon from the list.

Instructions to update launcher icon to your custom image

Please note that this approach would only work if you have your images hosted on a public domain, and you can access it through a URL. Here are the steps for this approach:

Note: Because there is variation in each custom image which requires additional coding to perfect your launcher’s look, we highly recommend using the standardized Font Awesome logo (the approach we mentioned above)

1. Follow steps 2 through 5 from the instructions above, but use the following CSS in step 4 (instead of the CSS mentioned in step 4 above):

.uiq-fa-space-shuttle {
 visibility: hidden;
 transform: none !important;
}

.uiq-launcher-aligner {
 content: url(https://drive.google.com/file/d/1edK_gSb5ttV3t482h-lwTkXerOvGWH3Y/view?usp=sharing);
}

and replace the URL with your own URL.

Please note that if you would like UserIQ to perform any additional customizations to the CSS provided above, we do offer services (billed hourly), and please reach out to your CSM to get started.