[Support request] Code for social icons in header widget

[a1reno]

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!

[David]

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/

[a1reno]

Cool thanks!

[David]

You’re welcome

[a1reno]

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

[David]

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

[a1reno]

Perfect! Thanks a lot David!

[David]

Glad to be of help

[a1reno]

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.

[David]

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>

[a1reno]

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

[David]

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;
}

[a1reno]

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

[David]

You’re welcome 🙂

[Author]

Posts