Use Icons on the Card Element

Support
#1

Hello,

I am using the card-element and try to have kind of checklist on the backside. I tried using the Shortcode [cs_icon_list_item type=“check”] in the textarea but it won’t work. It just displays the Shortcode as if it were text.

Is there a way to use Icons on the card-element?

Thanks in advance!
Tim

#2

Hi Tim,

As the card element won´t read shortcodes, you need to use the html tag for the icon.

You can find them inspecting the desired icon with the right button of your mouse on the page below.

http://demo.theme.co/integrity-1/shortcodes/icons/

For the check icon you can add:

<i class="x-icon x-icon-check" data-x-icon="" aria-hidden="true"></i>

Hope it helps!

#3

Hello Joao,

I copied your code but the checkmark is not being displayed on the card-element.
Should I replace that ‘square’ in data-x-icon=“”?

Thanks for your help.
Tim

#4

Hi Tim,

Please try this:
<i class="x-icon x-icon-check custom-check" aria-hidden="true"></i>
Then add the following custom CSS on your child theme style.css file:

  content: "\f00c";
}```
data-x-icon is the value of the icon. Due to encoding issues it will not work when directly adding the code. We have to use the UNICODE value which is readable. We can see unicode value from here: http://fontawesome.io/icon/check/. Cornerstone also might strip the backslash so it's best to put in on child theme style.css file.

Hope this helps.
#5

This moment, when you just have no idea what you just did. But it worked :slight_smile:

I added the custom .css to the custom .css of the side I am creating in cornerstone.

Thanks a lot!

#6

You are most welcome. :slight_smile: