[shauney3Participant]

Hey.

I love your icons but I wanted to use them in my own CSS code, specifically in the – content: “”; – part…
Can this be done? I need the tick and the cross for now but may need others in the future, is there a list?
I am using Integrity.

Thanks for any help!

[ZeshanMember]

Hi there,

Thanks for writing in!

We are using Fontawesome icons sitewide. If you want to use custom icons, it is achievable with custom CSS code. We can guide in the right direction, but the full implementation would fall outside the scope of support we can offer.

So, in order to change Tick and Cross icon, you can use following CSS code:

.x-icon-check:before {
    content: '';
    width: 24px;
    height: 20px;
    background: url(tick.png) no-repeat 0 0;
    background-size: 100% auto;
    text-align: left;
    text-indent: -99999px;
    display: inline-block;
    vertical-align: middle;
}

.x-icon-times:before {
    content: '';
    width: 24px;
    height: 20px;
    background: url(cross.png) no-repeat 0 0;
    background-size: 100% auto;
    text-align: left;
    text-indent: -99999px;
    display: inline-block;
    vertical-align: middle;
}

Replace tick.png and cross.png with your icons URL. You can also adjust the height and width of the icons as per your preference.

Thanks!

[shauney3Participant]

Thanks for the reply!

(taking the tick as an example – Unicode: f00c with Fontawesome)

What I mean was, I am trying to using it with CSS content, like this:

content: “\f00c”;

But I am getting a little rectangle with a question mark in it, instead of the tick.

Am i writing the code wrong, or can it just not be done this way?

Cheers again!! =)

[Paul RModerator]

Hi,

Try to add your code in your child theme style.css

Then add !important to your content

eg.

.x-icon-check:before {
    content: '\f00c' !important;
}

Hope that helps.

[shauney3Participant]

it is still not working, the !important is unnecessary because it is reading the CSS line – but the “\f00c” part is coming up as invalid still (displays as a rectangle with the question mark in the center)

Doesn’t matter. Thanks for your help anyway.

[DarshanaModerator]

Hi there,

Could you please try adding the code with two backslashes into your Customizer’s Custom > CSS section When saving it will remove one.

.x-icon-check:before {
    content: '\\f00c';
}

Hope that helps.

[Author]

Posts