Change Featured list icon to one that's not in the default list?

Dear Sir/Mdm,

Is there a way for me to change Featured list icon to one that’s not in the default list?
CloudApp
https://iamchrishenson.com/

I’m thinking of using the text element to recreate the one of the featured list but there’s quite alot of alignment work to be done.

Please advice.

Hi There,

You can try with this CSS:

.home i.x-icon-graduation-cap.circle:before {
    opacity: 0;
}
.home i.x-icon-graduation-cap.circle {
    background: url(//cdn1.iconfinder.com/data/icons/hawcons/32/699742-icon-8-face-open-mouth-128.png) no-repeat center center;
    background-size: 32px 32px;
}

Hope it helps :slight_smile:

1 Like

Thank you THai, it’s working perfectly. Great solution :slight_smile:

You’re so much welcome!

I’m sorry guys, I changed it from a featured list to an icon list and now the code doesn’t work. I managed to get the icon that I don’t want to Opacity 0 but I didn’t manage to change the background to the icon that I prefer. Please advice. :frowning:

Please advice.

CloudApp

https://iamchrishenson.com

Hi there,

Please update this:

.home i.x-icon-diamond:before {
    opacity: 0;
}

to

.home i.x-icon-diamond:before {
    opacity: 1;
    color: #E4E3E3;
}

Hope this helps.

Hello Jade, it didn’t work. Still showing the diamond. https://cl.ly/1N0t2J0t1q05

Hi there,

Please change this CSS

.home i.x-icon-diamond:before {
    background: url(https://iamchrishenson.com/wp-content/uploads/2017/06/wedding-cake.png) no-repeat center center;
    background-size: 16px 16px;
}

to this

.home i.x-icon-diamond:before {
    content: url(https://iamchrishenson.com/wp-content/uploads/2017/06/wedding-cake.png) no-repeat center center;
}

Hope this helps.

Hello Rad, it didn’t work :frowning:

Here’s the code I have now:

.home i.x-icon-diamond:before {
opacity: 1;
color: #E4E3E3;
}

.home i.x-icon-diamond:before {
content: url(https://iamchrishenson.com/wp-content/uploads/2017/06/wedding-cake.png) no-repeat center center;
}

Hi there,

Ah sorry, it’s supposed to be URL only. I thould be like this

content: url(https://iamchrishenson.com/wp-content/uploads/2017/06/wedding-cake.png);

There should be no no-repeat center center.

Cheers!