Docs

[lindsayfaas]

I’m trying to put an icon on my card element, on the front, to help people to know to “flip” the card. I’ve tried using the shortcode for icons in with my text but that doesn’t work. Is there something else I can do? Please dumb it down, everything code related is relatively new to me 🙂

[Lely]

Hi There,

Thanks for posting in. Under Front Graphic on the Card element we can add an Icon. Unfortunately, icons is not supported inside the Front Title and Content part of the card element. Those option is intended for simple text only and not a shortcode. Thank you for understanding.

[lindsayfaas]

is there any kind of code that would work to do that?

[Lely]

Hi There,

HTML element are strip out on the Front Content textfield. We can use Javascript instead. Add custom-cardon your Card element class field. Then on Settings Tab> Custom JS add the following:

(function($){
   $( '<i class="x-icon x-icon-adjust" data-x-icon="" aria-hidden="true"></i>').insertAfter( ".custom-card .front .x-face-text" );
})(jQuery);

Update the icon above to your preferred icon.

Hope this helps.

[lindsayfaas]

i shall give that a try. Where do I look for the Card element class field? Which file am I manipulating? THanks again

[Christopher]

Hi there,

Please see the attachment.

Thanks.

[lindsayfaas]

ok, I put the code in and it inserts after the text, and is the “adjust” icon. When I change “x-icon-adjust” to “x-icon-rotate-left” nothing happens. Where exactly do I change the icon type? In that vein how do I color and size it now in the JS we’ve created?
Thanks

[Paul R]

Hi,

To change it to rotate left, change the code to this.

(function($){
$( '<i class="x-icon my-icon x-icon-rotate-left" data-x-icon="&#xf0e2;" aria-hidden="true"></i>').insertAfter( ".custom-card .front .x-face-text" );
})(jQuery);

Then add this in custom css to change its color and size

.x-icon.my-icon {
   color:red;
   font-size:20px;
}

Hope that helps.

[lindsayfaas]

Thanks that worked like a charm

Is there a way to tell certain cards to not “flip”?

[Christopher]

Hi there,

So why you want to use card element then? you can add simple text element.

Thanks.

[lindsayfaas]

It is a great ease of use element (aside from the icon adding) and for myself with little coding experience it would be much easier to make multiple cards with the simple user interface the card element has over doing it all myself in a text element. can it be done?

[Rad]

Hi there,

Sure, please add this CSS 🙂

.x-card-outer.flip-3d.flip-from-top.flipped .x-card-inner {
    -webkit-transform: rotateX(-0deg);
    -ms-transform: rotateX(-0deg);
    transform: rotateX(0deg);
}

Thanks!

[lindsayfaas]

Hi there, it didn’t work. On the Card Element do I need to input a class or id for it to recognize the change to the css? And in that vein will it stop my other cards from flipping with this change to the code? Thanks again.

[Paul R]

Hi,

Can you provide us your site url so we can take a closer look.

Thanks

[lindsayfaas]

This reply has been marked as private.

[Author]

Posts