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

Support
#1

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.

#2

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
#3

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

#4

You’re so much welcome!

#5

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

#6

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.

#7

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

#8

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.

#9

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;
}

#10

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!