Icon Customizations for Mobile Devices

0

Has anyone in the community has a work around for Change Icons for Checkboxes and Radio Buttons for surveys that are viewed mobile devices. 

I was able to use custom icons for a survey, however, the custom icons does not come through on mobile devices. 

I think this is expected (according to the article below) however I am curious whether anyone has come up with creative work arounds leveraging the API or something else. 

 

Change Icons for Checkboxes and Radio Buttons

https://help.surveygizmo.com/help/icons
Please note the below icon customizations use custom CSS that does not work on mobile devices.

 

 

Many thanks!

Esteban

Lola Gill answered
    0
    Lola Gill 6.93K Rep.

    I’m not a CSS expert, but using the heart icon example, I was able to get the hearts on the mobile version with this CSS:

    .sg-survey .sg-mobile-optimized:not(.sg-rtl) input[type=radio] + label:before {
    content: “\f08a”;
    }

    .sg-survey .sg-mobile-optimized:not(.sg-rtl) input[type=radio]:checked + label:before {
    content: “\f08a”;
    }

    So instead os starting the CSS code with:

    .sg-replace-icons

    I’m starting with
    .sg-survey .sg-mobile-optimized:not(.sg-rtl)

    Hopefully this is helpful!

    Lola Gill edited answer
      ×

      Login

      Question stats

      • Active
      • Views1413 times
      • Answers1 answer
      • Followers1 follower