#80351 Add a twitter icon before the text on a button

Landing Forums Jupiter WordPress Theme Add a twitter icon before the text on a button

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • ian fuller

    Hi

    I wan to use the tweetmeme button, and I have the choice to use the standard of larger button. I want the button to be bigger, but I can’t work out how to do it.

    So I tried to make my own button, and then add an icon to the button. However, there doesnt seem to be a twitter icon in the library. I know there is one in the FOnt Awesome library, but it doesn’t seem to be available in my theme. <code class=”gray5 language-markup”><span class=”token tag”><span class=”token punctuation”><</span>i <span class=”token attr-name”>class</span><span class=”token attr-value”><span class=”token punctuation attr-equals”>=</span><span class=”token punctuation”>”</span>fab fa-twitter<span class=”token punctuation”>”</span></span><span class=”token punctuation”>></span></span><span class=”token tag”><span class=”token punctuation”></</span>i<span class=”token punctuation”>></span></span>

    So, is there 1) a way to make the tweetmeme button even bigger, or 2) a way to add the twitter icon to my own button?

    Thank you!

     

    Tatyana Hutsol Support Team

    Hello,

     

    Do you want to increase this button https://take.ms/ufaoQ ?

    Please add this code in Theme Options > Advanced > Custom CSS:

    .xl .btn {
    height: 38px !important;
    padding: 5px 18px 5px 20px !important;
    width: 108px;
    }
    .btn-o {
    width: 108px !important;
    }
    iframe.twitter-share-button {
    width: 108px !important;
    height: 38px !important;
    }

     

    Let us know the result.

    Regards.

    ian fuller

    Hi

    Thanks for taking a look. Unfortunately that didn’t do it (this page – https://address72.co.uk/our-tips/life-at-home/keeping-safe/).

    I can find a way to edit hte button text size and padding etc, but not the actual button dimensions.

     

    Nodari Support Team

    Hello Ian

    The size and style of the button is predefined from the Iframe, probably this is the reason why you cant style it by custom CSS,

    by the way, where is your custom twitter button on the page? we can add a twitter icon anywhere in that button instead 🙂

    Waiting for your reply

    ian fuller

    <div>Ok that makes sense.</div>
    <div></div>
    <div>I have added a large button now on that same page ( https://address72.co.uk/our-tips/life-at-home/keeping-safe/)</div>
    <div></div>
    <div>I used the class twtbutton and in the CSS I have styled it as follows,</div>
    <div></div>
    <div>.twtbutton .mk-button–text {font-size: 21px !important;</div>
    <div>font-weight: 600 !important;</div>
    <div>letter-spacing: 0 !important;}</div>
    <div></div>
    <div>If you can help me to add the twitter bird icon to that button it would be amazing.  Thank you.</div>

    ian fuller

    <div>Ok that makes sense.</div>
    <div></div>
    <div>I have added a large button now on that same page ( https://address72.co.uk/our-tips/life-at-home/keeping-safe/)</div>
    <div></div>
    <div>I used the class twtbutton and in the CSS I have styled it as follows,</div>
    <div></div>
    <div>.twtbutton .mk-button–text {font-size: 21px !important;</div>
    <div>font-weight: 600 !important;</div>
    <div>letter-spacing: 0 !important;}</div>
    <div></div>
    <div>If you can help me to add the twitter bird icon to that button it would be amazing. Thank you.</div>

    Amir Rather Support Team

    First add the Extra class name tweet-this to the button and then the below JS code in Theme Options > Advanced > Custom JS: 

    jQuery('.tweet-this a .mk-button--text').append('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>');

    Let me know the results 🙂

    ian fuller

    Thank you. Thats put the bird on there. I need to style it though (white bird, place in front of text, adjust padding etc.

    Can I do that in my CSS?

     

    Tatyana Hutsol Support Team

    Hello,

     

    I edited the code a bit https://take.ms/BqFeg and added css code in Theme Options > Advanced > Custom CSS:

    .twtbutton a span svg {
    padding: 10px;
    vertical-align: middle;
    }

    Please check the button now.

     

    Thank you.

    Regards.

     

    ian fuller

    Perfect, thank you ever so much. I really appreciate that.

     

     

    Private
    Amir Rather Support Team
    This reply has been marked as private.
Viewing 11 posts - 1 through 11 (of 11 total)
You must be logged in to reply to this topic. Login