Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #486262

    Hello, I’d like to know how to center an icon box (small icon to left) so it aligns with a centered heading within a single column element.
    Can you help?


    Hey Jennifer!

    Can you please post a screenshot and show the changes you would like to make? I am not sure if i understand it clearly.



    Hi Yigit –
    I have attached a link to the screenshot below.

    Thank you,



    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .single-product header.entry-content-header {
        text-align: center;
    .single-product .iconbox_icon.heading-color {
        left: 36%;

    Best regards,


    Thanks for the very quick reply, Yigit.
    One issue though: I have a lot of icon boxes throughout the site. I only want to apply the centering selectively to icon boxes that I have marked individually with the custom CSS “destination-iconbox”
    Can you tell me how I modify the code above to do that?




    You can do that by adding the page-id class (inspect the page, you will find the page id in the body tag) before Yigits code to only have the code affect the page in question, or add a container class before in order to for it to only affect a specific section. If you need help then send us the pages in question and specify where you’d like the code to affect.




    I am wanting to do the same thing. I am using the Icon Box Element – with the style small icon at the left side of the title. I’d like the icons and the title to be centered – so the icon is immediately to the left of the title, but the whole thing is centered in the column, just like this webiste sample, you’ll see just above the footer: https://watches-theme.myshopify.com/?fts=0

    My site is here: https://0a37a07f99.nxcli.net/

    I’ve given my iconbox a class .custom-icon and tried this code:.custom-icon .iconbox_content_title {text-align: center !important;}

    But it only centeres the text – the icon doesn’t come with it…

    I tried the other code in this thread but it didn’t work.

    Thank you!


    Hi Eleina_Shinn,

    Please try adding this CSS code in Quick CSS:

    .custom-icon .iconbox_content .entry-content-header {
        text-align: center;
    .custom-icon .iconbox_icon, 
    .iconbox .iconbox_content .iconbox_content_title {
        display: inline-block;
        float: none;
        position: static;
    .custom-icon .iconbox_icon {
        margin-right: 8px;

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.