Custom image icon box

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 24 replies, 3 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 25 total)

1 2 →

Back to forum

Posted in: Dante
November 25, 2015 at 2:28 am #231112

tooeasy
Member

Post count: 38

Hi,
I’m trying to set up a custom image instead of an icon in a “icon box left” using this CSS code:

.estraclass .sf-icon-standard .sf-icon-cont {
background-image: url(“http://www.alvaropmarketing.com/wp-content/uploads/2015/11/logo-black.png”);
background-repeat: no-repeat;
background-size: 100% auto;
}

But I don’t know how to hide the hover effect and circle around the image. How can I fix it?

Thanks.

November 25, 2015 at 8:36 am #231137

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
Please provide me login detail to check and resolve the issue.
Thanks
Mohammad

November 25, 2015 at 7:50 pm #231376

tooeasy
Member

Post count: 38

This reply has been marked as private.

November 26, 2015 at 8:38 am #231432
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please use this custom css code:-
```
.estraclass .sf-icon-standard .sf-icon-cont{
background-image: url("http://www.alvaropmarketing.com/wp-content/uploads/2015/11/logo-black.png");
background-repeat: no-repeat;
background-size: 100% auto;
border:none !important;
}

.estraclass  .sf-icon-cont:hover{
border:none !important;
background-color:transparent !important;
}
```
Thanks
Mohammad
November 26, 2015 at 9:46 am #231446

tooeasy
Member

Post count: 38

Thanks Mohammad.

the first code works well but the code for the hover effect is not working. The blue color is still there.

Thanks!

Attachments:
You must be logged in to view attached files.

November 26, 2015 at 10:17 am #231454
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please try to use this custom css code:-
```
.sf-icon-cont:hover{
border:none !important;
background-color:transparent !important;
}
```
Thanks
Mohammad
November 26, 2015 at 10:19 am #231455
Kyle – SUPPORT
Moderator

Post count: 35880
Try this:
```
.sf-icon-box {
  pointer-events: none;
}
```
– Kyle
November 26, 2015 at 11:10 am #231466

tooeasy
Member

Post count: 38

It worked perfectly. Thanks.

One more thing. How can I maintain the same line height in the icon boxes? I want to set the same line height that is on the rest of the body text of my site.

Thanks.

November 26, 2015 at 11:18 am #231468
Kyle – SUPPORT
Moderator

Post count: 35880
Add this to your custom css:
```
.sf-icon-box-content > p {
  line-height: 31px;
}
```
– Kyle
November 26, 2015 at 11:25 am #231470

tooeasy
Member

Post count: 38

Thanks. Amazing support guys.

November 26, 2015 at 11:26 am #231471

Kyle – SUPPORT
Moderator

Post count: 35880

No problem 🙂

November 26, 2015 at 10:11 pm #231661

tooeasy
Member

Post count: 38

Hi, it worked well because I was using a round icon image, but I tried changing the image and it is being cropped maintaining a round shape. How could I avoid this circle shape to show the full image?

Thanks.

Attachments:
You must be logged in to view attached files.

November 27, 2015 at 4:37 am #231703
Kyle – SUPPORT
Moderator

Post count: 35880
Add this:
```
.sf-icon-cont {
  border-radius: 0;
}
```
– Kyle
November 27, 2015 at 11:00 am #231752

tooeasy
Member

Post count: 38

Thanks, one last question. Hoy could I put the icon at the same height of the text of the box?
And How could I set up a bigger icon? I want to upload an icon bigger than 70x70px but it is being resized.

Thanks again guys.

November 27, 2015 at 11:09 am #231760

Kyle – SUPPORT
Moderator

Post count: 35880

Go to themes/dante/swift-framework/page-builder/builder/shortcodes/icon-boxes.php and edit line 30:

$image_object = sf_aq_resize( $img_url, 70, 70, true, false);

– Kyle
Back to forum

Posted in: Dante