[Resolved] How do I add social media icons in Widget without extra plugins?

Home Forums Support How do I add social media icons in Widget without extra plugins?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1678313
    siddardha thammana

    Hello

    Is it possible to add social media icons in Widget without extra plugins?
    I was hoping to use the icons inbuilt in the theme and customizing them as I only have to link to facebook and twitter pages

    Thanks

    #1678441
    David
    Staff
    Customer Support

    Hi there,

    the Theme only contains Icons that the theme uses ( Hamburger, Toggles, etc ) there are no social icons.

    You would need to use some HTML like this:

    <div class="social-link-container">	
    <a class="social-link" href="#social-link-url-here" aria-label="Link to Twitter">
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg>
    </a>
    <a class="social-link" href="#social-link-url-here" aria-label="Link to Facebook">
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path></svg>
    </a>
    </div>

    And add some CSS:

    .social-link-container {
    	display: flex;
    }
    .social-link-container .social-link {
    	padding: 5px;
    	margin-right: 10px;
    }
    .social-link-container .social-link svg {
    	height: 40px;
    }

    The SVGs can be downloaded from the FontAwesome Website.

    #1681467
    siddardha thammana

    Hello

    Thank you, the code worked.

    #1681637
    David
    Staff
    Customer Support
    #1682108
    siddardha thammana

    Hey David

    I just remembered Dashicons which I used in your code, but they are not centered properly

    social share icons

    The css I am using for them now:
    .dashicons-twitter{
    font-size:30px;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1DA1F2;

    Can you please tell me how to center them

    Thanks

    #1682145
    David
    Staff
    Customer Support

    Can you share a link to a page where i can see them?

    #1682159
    siddardha thammana

    I added this and it worked

    display: flex;
    justify-content: center;
    align-items: center;

    social icons

    Thanks again 🙂

    #1682374
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.