Centering icon in a circular container

[rhodez]

Hi!

I want to center a icon in a circular container (see screenshot – this is what I want). For some reason I can’t do it.

Centering icon without circular container works ok:

<p style=”text-align: center;”>[icon image="ss-crosshair" character="" size="medium" cont="no" float="left" color="#97c92a"]</p>

But when I add circular container, the icon is left aligned:

<p style=”text-align: center;”>[icon image="ss-crosshair" character="" size="medium" cont="yes" float="left" color="#97c92a"]</p>

Can I center the icon with circular container somehow? Thanks!

[Kyle – SUPPORT]

It would be easier to use the icon box page builder asset for this, see: http://cardinal.swiftideas.com/asset-reference/page-builder-assets/icon-box/

The Boxed Three Icon Boxes will probably be best

– Kyle

[rhodez]

Thanks,

I tried that. Unfortunately I couldn’t get it quite right. I used standard icon box and added a border to the element with css.

The problem is that the “standard” icons are too big for the circular container and don’t look good. I’d like to have medium size icons (as in my previous screenshot), now it seems they are large by default (see screenshot).

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Try using this code?

<p style=”text-align: center;”>[icon image="ss-crosshair" character="" size="medium" cont="yes" float="none" color="#97c92a"]</p>

– Ed

[rhodez]

Yes,

I tried this but for some reason it won’t center (see screenshot):

<p style=”text-align: center;”>[icon image="ss-crosshair" character="" size="medium" cont="yes" float="none" color="#97c92a"]</p>

When I use value cont=”yes” it won’t center. The icon centers normally only when using value cont=”no”.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Ahh, forgot that you need to use a div rather than p, as WordPress auto closes these.

<div style="text-align: center;">[icon image="ss-crosshair" character="" size="medium" cont="yes" float="none" color="#97c92a"]</div>

That will do it.

– Ed

[rhodez]

Works! Thanks a lot for quick assistance :).

[Kyle – SUPPORT]

Great! Thanks Ed

– Kyle