Staff replied SP Page Builder

SPPB5 - Bring back width and height of icons

Asked by Alvaro 2 years ago Last activity 2 years ago

In previous versions of SP Page builder, the Feature Box icons and others added width and height, so you could create well-centered icons here, some of the previously generated CSS:

#sppb-addon-1550791887091 .sppb-icon .sppb-icon-container > i {
     font-size: 40px;
     width: 40px;
     height: 40px;
     line-height: 40px;
}

Image of how it looked previously:

Currently SPPB5 only outputs the font-size:

#sppb-addon-1550791887091 .sppb-icon .sppb-icon-container > i {
   font-size: 40px;
}

And the fontawesome icons do not all have boxes of the same width and height but rather they are according to the content, so to have icons with a background like the ones in the image you have to configure one in one of the paddings, being able to use the new copy and paste SPPB5 style.

image of what it looks like without SPPB5 generating the width and height, what is fine is because the icon has the same width and height.

So is it possible to bring back the widths and heights? or because they removed it from SPPB5?

7 replies

Mehtaz Afsana Borsha Staff

2 years ago

Thanks for contacting us and sorry for this inconvenience. You can use that CSS again in your custom.css file. In the meantime I will also inform our team about it.

-Regards.

Alvaro Asked this

2 years ago

Hello, thanks for answering.
The custom.css thing is a solution when I had a site, but imagine that I have created 50 sites and in each site there are only 3 cases (because the icons never have the same font-size) then I must create 3 classes per site, this as rebuild the sites again.

Now let's imagine the problems for you who sell templates, with hundreds of thousands of sites created, and in all of these cases there are, it is true that it is not a code error, but it is a design problem.

This is a report and I would like to know if it is possible to bring this back or not, that is all I want to know.

Regards

Alvaro Asked this

2 years ago · edited

I'm writing again because I took the liberty of reviewing the addon and I found that they have forgotten to add the width, height and line-height only in the public part because it exists in the live editor. Here the code, lines 681, 682, 683, 684.

$output .= $lodash->unit('font-size', '.sppb-icon .sppb-icon-container > i', 'data.icon_size', 'px');
$output .= $lodash->unit('width', '.sppb-icon .sppb-icon-container > i', 'data.icon_size', 'px');
$output .= $lodash->unit('height', '.sppb-icon .sppb-icon-container > i', 'data.icon_size', 'px');
$output .= $lodash->unit('line-height', '.sppb-icon .sppb-icon-container > i', 'data.icon_size', 'px');

I would like them to add it to the public part in the next version, here is the fixed code, line 345.

$iconSizeStyle = $cssHelper->generateStyle('.sppb-icon .sppb-icon-container > i', $settings, ['icon_size' => ['font-size','width','height','line-height']]);

Regards

Mehtaz Afsana Borsha Staff

2 years ago

Thanks for your opinions. I will inform our team about it. If possible give me the template name please.

Alvaro Asked this

2 years ago

Hi there.

I'm not talking about a template, I'm talking about the SP Page Builder component of the Feature Box addon, which does not generate the width, height and line-height in the public part, that is, in the public function css() and only does so in the live editor, that is in public static function getTemplate().

In my previous answer I have already left the solution. Please be kind to fix that bug.

Regards

Mehtaz Afsana Borsha Staff

2 years ago

Ok I will add it in our bug list.

Thanks.

Alvaro Asked this

2 years ago

Apparently you did not add it to the list of bugs, because they have published a new version and this bug is not fixed even though I have even put the solution here and that Feature Box is the most used SPPB addon.

I don't send these reports because I have plenty of time, I do it because I use the product and I don't want to be making overrides of the addon just for this.

Regards

BOFHJunior

2 years ago

Thx for your work Alvaro.

I agree, non well-centered icons look bad and i also want well-centered icons back because i have the same problem with fontawesome icons!

Mehtaz Afsana Borsha Staff

2 years ago

Our team has already fixed this issue. You can get it in our next update.

In the docs