Image instead an image - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

August 30, 2022 at 11:23 am #1363181

Hello,
I would like to know if it is possible to insert an image instead of an icon in the “Icon box”.
The reference page is this.
Here is an image to better understand.
I tried adding this code:

.thrive-coaching html body [data-av_iconfont = 'entypo-fontello']: before {
    opacity: 0;
}

but it does not work

Thanks for the support.
Manuela

This topic was modified 2 years, 2 months ago by famarinu.

August 30, 2022 at 1:57 pm #1363203

Mike

Moderator

Hey Manuela,
Thanks for the link to your page and the screenshot, I’m not sure which image you wish to use, but a while back you have link to this image: consciousuncoupling.png
so I used it in this example, you can change the image in the code below:

.main_color .thrive-coaching.iconbox_top .iconbox_icon {
background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png);
height: 3px;
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.thrive-coaching.iconbox_top .iconbox_icon:before { opacity: 0; }

the expected results:

After applying the css, please clear your browser cache and check.

Best regards,
Mike

August 30, 2022 at 3:30 pm #1363220

Guenni007

Participant

First : wouldn’t it be better to have a white png of that icon – to have the same look for the icons on top?

.main_color .thrive-coaching.iconbox_top .iconbox_icon {
  content: " ";
  background-color: #FFF;
  background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png);
  background-size: 35px; 
  background-position: center 6px;
  background-repeat: no-repeat;
  border: 2px solid #b3dce1;
  color: transparent !important; /*** this is enough to get rid of entypo-fontello icon ***/
}

/**** if you decide to have a white png file you can get rid of that  ****/
.main_color .thrive-coaching.iconbox_top a.iconbox_icon:hover {
  background-color: #b3dce1;
  border: 2px solid #b3dce1;
}

in this case with white png file use only:

.main_color .thrive-coaching.iconbox_top .iconbox_icon {
  content: " ";
  background-image: url(//link-to-your-white-png-file/consciousuncoupling-white.png);
  background-size: 35px; 
  background-position: center 6px;
  background-repeat: no-repeat;
  color: transparent !important; /*** this is enough to get rid of entypo-fontello icon ***/
}