How to center text in sf_iconbox when remove icon

[solidsn2004]

Hi,

I recently started working on a project and I have imported a demo page from Dante as my home page and started modifying it. I really like the animated iconboxes for the services. My client offers 19 services so it is really hard to find the appropriate icon for each and every service.

I wanted to ask:

1) If I remove the icon from sf_iconbox the title remains in the lower bottom of the box. Is there a way to center this title inside the box?

2) In case my client finds the icons he likes that are not in the icon list of the theme, is there a way to upload these external icons and use them instead of the default ones?

Thanks in advance and looking forward to your reply.

[Mohammad – SUPPORT]

Hi,

1- Please attach marked screenshot to explain your desire changes.

2- I am afraid that its not possible by theme.

-Mohammad

[solidsn2004]

Hi Mohammad and thanks for your reply.

Please find attached image. As you can see for the first iconbox I am using the following code inside a text block:

“[sf_iconbox character=” type=’animated’ title=’Progettazione edilizia, civile e industriale’ animation=’none’ animation_delay=’200′]”

As you can see I have removed the image of an icon.

What I want to achieve is to center the title when I remove the icon. Right now from my understanding it centers the icon and the title together but when I remove the icon the title is lower inside the box.

I am not sure if I made myself clear.

Please let me know if there is a solution around this.
Thanks

Attachments:

You must be logged in to view attached files.

[solidsn2004]

Hi,

Maybe it wasn’t very clear the way I explained it.
Look at the attached image. On the left side (tagged “before”) is how it looks now when I remove the icon and set the title.

What I want to achieve is the right side (tagged “after”).

Please let me know.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

How did you remove the icon?

– Kyle

[solidsn2004]

Hi Kyle,

I simply removed the image=’ss-smartphone’ from the code.

[Kyle – SUPPORT]

Add this to your custom css:

.sf-icon-box-animated .sf-icon {
  display: none;
}

That will keep the text centred

– Kyle

[solidsn2004]

Thanks a lot Kyle,

Is there also a way to make the box a fixed size?

As you can see now the box’s size depends on how many lines the title has (see attached image).

Let me know.

Cheers

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try this:

.one_fourth > .sf-icon-box-animated .inner .front .sf-icon-box-content-wrap {
  min-height: 60px;
}
.one_fourth > .sf-icon-box-animated .inner .front {
  min-height: 230px;
  padding-top: 80px;
  padding-bottom: 80px;
}

– Kyle

[solidsn2004]

Thanks a lot Kyle!
Worked like a charm!

[Mohammad – SUPPORT]

Hi,

Great thanks to Kyle.

-Mohammad