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

    I’ve changed icon size using this code;

    [data-av_icon]:before {
        font-size: 50px!important;
    }
    .iconbox_icon {
        margin-right:20px!important;
    }
    
    .iconbox_top .iconbox_icon {
        font-size: 50px;
        line-height: 50px;
        min-width: 50px;
        min-height: 50px;
        top: -50px;
        left: 45%;
    }

    However I want to change the size only button icon size.
    I attached image file.

    #790836

    Hi Ayumi,

    Can you please give us a link to the page that has that button? 

    Best regards,
    Sarah

    #791413

    Here you are;

    #791453

    Hi Ayumi,

    Thank you for that information.

    To change the size of icons in a button, please add this code:

    .avia-button [data-av_icon]:before {
       font-size: 30px!important;
    }

    But if you want to change the icon size of only that button, please use this code:

    .avia-builder-el-103 [data-av_icon]:before {
       font-size: 30px!important;
    }

    The .avia-builder-el-103 makes it specific to that button.

    As a side note, if you want only Icon Box icons to be 50px, please replace this in your code:

    [data-av_icon]:before {
       font-size: 50px!important;
    }

    and use this instead:

    .iconbox [data-av_icon]:before {
       font-size: 50px!important;
    }

    I hope that is clear and helpful. Please let us know if you need additional help.

    Best regards,
    Sarah

    #791546

    Hi Sarah,
    Thank you for you help. I tried first and second code, but neither doesn’t work.
    Could you please help again?

    #791554

    Hi Ayumi,

    I cleared your WordPress cache and edited your Quick CSS. The code is now this:

    .iconbox [data-av_icon]:before {
        font-size: 50px!important;
    }
    .iconbox_icon {
        margin-right:20px!important;
    }
    
    .iconbox_top .iconbox_icon {
        font-size: 50px;
        line-height: 50px;
        min-width: 50px;
        min-height: 50px;
        top: -50px;
        left: 45%;
    }
    
    .avia-button [data-av_icon]:before {
       font-size: 30px!important;
    }
    

    If you check your website now, you will see the changes. :)

    You can update the font size to fit your preference.

    Best regards,
    Sarah

    #791567

    Sarah,
    Thank you so much for your help. That’s great.

    #791584

    You’re welcome! 

    Can we help you with anything else in this topic, or can we close this thread?

    Best Regards,
    Sarah

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