[Support request] Code for social icons in header widget

Home Forums Support [Support request] Code for social icons in header widget

Home Forums Support Code for social icons in header widget

  • This topic has 13 replies, 2 voices, and was last updated 2 years ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #895945
    kiant123

    Hi,

    I’ve been trying to put social icons into my header widget using code (i prefer to not use plugins) but haven’t been able to come up with the proper code myself that looks good. I’m trying to generate this look specifically: https://cl.ly/1a2616afd79d

    Would you perhaps be able to give me the code so i can put it into an html widget?

    Thanks!

    #896034
    David
    Staff
    Customer Support

    Hi there,

    this HTML code will display the icons, just need to update the URLS:

    <a href="full_url_to_social_network"><i class="fa fa-twitter" aria-hidden="true" title="twitter"></i><!-- Twitter --><a/>
    <a href="full_url_to_social_network"><i class="fa fa-pinterest" aria-hidden="true" title="pinterest"></i><!-- Pinterest --></a>

    More info and icon HTML can be found here:

    https://fontawesome.com/v4.7.0/accessibility/

    #896043
    kiant123

    Cool thanks!

    #897136
    David
    Staff
    Customer Support
    #907460
    kiant123

    Hi,

    I asked this question a while ago and have only just gotten round to this and have run into a couple of minor problems. I’ve been trying to play around with the code but it is not my forte at all!

    https://cl.ly/8880ef2ce000

    Firstly, the icons appear a little too high, if i could get it centered that would be great.
    Also I would like the icons to always be white in colour including when hovered but currently it is black and turns yellow on hover.

    Is there a way to modify the header widget code to make these changes?

    thanks in advance

    #907618
    David
    Staff
    Customer Support

    Hi there,

    it would require some CSS like so:

    .header-widget {
        margin-top: 6px;
    }

    The widget uses the link colors you can set in Customizer > Colors > Header

    #907666
    kiant123

    Perfect! Thanks a lot David!

    #907670
    David
    Staff
    Customer Support
    #908486
    kiant123

    Hi,

    I seem to have managed to run into a problem all over again with these icons. Apparently I do not actually have font awesome installed on my site and these icons happened to show up because they were on elementor pages which could load font awesome according. All my other pages which do not have elementor these icons never showed up.

    I would prefer not to use font awesome as i heard it affects site performance, so what is another best way to replicate these icons? I would prefer not to use a plugin too.

    Thanks.

    #908658
    David
    Staff
    Customer Support

    You could use inline SVGs like this:

    <a href="full_url_to_social_network"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg><!-- Facebook --><a/>
    <a href="full_url_to_social_network"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg><!-- Twitter --><a/>
    <a href="full_url_to_social_network"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 19c-.721 0-1.418-.109-2.073-.312.286-.465.713-1.227.87-1.835l.437-1.664c.229.436.895.804 1.604.804 2.111 0 3.633-1.941 3.633-4.354 0-2.312-1.888-4.042-4.316-4.042-3.021 0-4.625 2.027-4.625 4.235 0 1.027.547 2.305 1.422 2.712.132.062.203.034.234-.094l.193-.793c.017-.071.009-.132-.049-.202-.288-.35-.521-.995-.521-1.597 0-1.544 1.169-3.038 3.161-3.038 1.72 0 2.924 1.172 2.924 2.848 0 1.894-.957 3.205-2.201 3.205-.687 0-1.201-.568-1.036-1.265.197-.833.58-1.73.58-2.331 0-.537-.288-.986-.886-.986-.702 0-1.268.727-1.268 1.7 0 .621.211 1.04.211 1.04s-.694 2.934-.821 3.479c-.142.605-.086 1.454-.025 2.008-2.603-1.02-4.448-3.553-4.448-6.518 0-3.866 3.135-7 7-7s7 3.134 7 7-3.135 7-7 7z"/></svg><!-- Pinterest --></a>
    #908667
    kiant123

    Hi David,

    That almost works perfectly except its the wrong colour. Is there anyway to get it just so the icons are white without the borders? https://cl.ly/e9d0384f2a7c

    also assuming I can get around the colour issue there seems to be a problem with the code on the pinterest line: https://cl.ly/c4eec60845cb

    Thanks once again

    #908683
    David
    Staff
    Customer Support

    This github repro provides SVG’s for all of the FA 4.7 icons:

    https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

    Click the icon in the list, it will preview, then hit the RAW button to extract just the SVG markup.

    Changing the colors would require some CSS like this

    .header-widget svg {
        fill: #ffffff;
    }
    #908699
    kiant123

    ok, thanks a lot! will give it a go!

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