Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 18, 2016 at 10:35 pm #585768
    IASupport

    Hi

    I’ve added a button with the twitter icon underneath one of the authors on a site I’m setting up for a client, if you follow this link and scroll down to Ben Parker you can see the social icon for twitter under his bio. Obviously at the moment it doesn’t look great as it’s a funny shape and the icon is too small.

    If I add the following css to the a element then it works but I can’t see any way to apply it just to that element without it affecting other buttons on the site. I’m also not sure if this code would work on all browsers.

    height: 50px;
    min-width: 50px!important;
    line-height: 25px;
    max-width: 50px;
    font-size: 25px;
    padding-left: 20px;

    Is there any way to get the button to be square and make the icon bigger whilst only affecting the current button and being browser compatible?

    • This topic was modified 8 years, 10 months ago by IASupport.
    February 19, 2016 at 2:11 pm #586059
    IASupport

    For the moment I’ve had to add the text back in to the right of the icon so that it doesn’t look strange when we present it to the clients but if anyone can think of a way to get a 50×50 button with the twitter icon in it that would be great.

    Thanks.

    February 22, 2016 at 6:18 am #586855
    Rikard

    Hi,

    I don’t think a 50×50 pixel button will be possible with the text next to the icon, but you can try the following CSS to target it:

    Target buttons on that page only:

    .page-id-16 .avia-button {

}

    Target that builder element only, be careful using this though since the builder number will change if you add/remove items above it:

    .page-id-16 .avia-builder-el-13 {

}

    Regards,
    Rikard

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