1

I'm using ionicons in my app, and I'd like to style them with CSS gradients. The code I found works great on the browser, but it's not showing anything in the simulator / device, just a blank space. This is what I have in the browser: Browser print

my HTML:

        <div class="spacer" style="width: 300px; height: 20px;"></div>
        <p style="font-size: 11px; margin-left: 10px; color: #a9a9a9;">PESSOAL</p>
        <ion-item class="item-icon-left" id="perfil-list-item21">
            <i class="icon ion-bag gradient-icon" style="font-size: 25px;"></i><p style="font-size: 15px; display:inline;">Aniversário</p>
            <span id="userbirth" class="item-note"></span>
        </ion-item>

CSS:

.gradient-icon {
  background-image: -webkit-gradient(linear, left top, left bottom,  from(#00e6e6), to(#0047b3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;}

Any help will be welcome.

Fillipe Rodrigues
  • 35
  • 1
  • 4
  • Have you checked the documentation: https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html –  Feb 13 '17 at 03:35
  • Yes, I have. The gradient works with buttons and other elements, but I haven't found a way to make it work with icons... – Fillipe Rodrigues Feb 13 '17 at 03:39
  • I think your problem is as they described in that answer I linked: "In mobile safari at least, you can't use the keyword transparent, you have to use rgba(255,255,255,0) instead." –  Feb 13 '17 at 03:51

0 Answers0