Image instead of icon in an icon box

[ricknice]

Hi There,

Is it possible to replace the icon in an animated iconbox with a custom image?

And if it is possible, how must I do it?

thanks

[Kyle – SUPPORT]

This is pretty difficult, but can be done by adding this custom css:

.extraclass .sf-icon-box-animated .front {
  background-image: url("http://dante.swiftideas.net/wp-content/uploads/2012/09/jb_cute_monster-770x404.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-top: 150px;
  padding-bottom: 15px;
}
.extraclass .sf-icon-box-animated i {
  display: none;
}

You will need to create extra classes for each icon box, then add the class to the extra class field.

You will need to replace the background image to the url of your image, and you may also need to edit the padding.

– Kyle

[jleemedia]

Can you possibly follow this up with a more step by step explanation of how to do this? I am not quite sure how to utilize an extra class.

[Mohammad – SUPPORT]

Hi,
You have input field for extra class while you add/edit a icon box. You need to insert the extra class there.
Thanks
Mohammad

[davidbriones]

Hi,

I think I’m missing a step to do this.

I have copied the extraclass on the custom css. I’ve added my URL image. But how do I add the class to the extra class field? Which part of the extraclass do I copy in the extra class field? Is it a name that I have to put somewhere on this custom css?

Thanks in advance!!

[Rui Guerreiro – SUPPORT]

Using Kyle example you should edit the iconbox asset and got to the last field at the bottom.

The settings should look like this.
https://www.dropbox.com/s/d5paapwfi25vwf6/Screenshot%202015-10-07%2023.32.56.png?dl=0

Hope it helps.
-Rui

[davidbriones]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

The problem seems to be the url of the image, you have to use the http path to the file and not the ftp(to access ftp it’s necessary credentials and it doesn’t work that way)

-Rui

[davidbriones]

Hi,

Thanks for your quickly answer. I guess you mean like this: http://thebodygarage.com/wordpress/wp-content/uploads/2015/10/icono%20bici.jpg

but it doesn’t work for me. I must be doing something wrong again.
Thanks for your patience!

[Rui Guerreiro – SUPPORT]

can you provide admin access so I can check it for you?
Use the private reply.

-Rui

[davidbriones]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

@davidbriones

What is your login url page?
Thanks

-Rui

[davidbriones]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Check again I adjusted your css.
You should use a png image with transparency because of the rollover effect.

-Rui

[davidbriones]

This reply has been marked as private.