I Fixed Font Awesome JavaScript Logo

👋 Ciprian on Wednesday, September 30, 2020 in Blog, JavaScript
Last modified on Wednesday, September 30, 2020

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

#f7df1e

#000000

The JavaScript logo colours are yellow (#f7df1e) and black (#000000).

Font Awesome SVG Icon

The problem with the Font Awesome JavaScript logo is that the abbreviation (the JS letters) is hollow, so it cannot be styled. The letters should be black.

While there are alternatives, such as CSS pseudo-elements, the best option is still a clean SVG. If you are using Font Awesome, here is the (unoficially) updated icon:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-js fa-fw fa-w-14" data-icon="js" data-prefix="fab" viewBox="0 0 448 512">
    <defs/>
    <path fill="#000000" d="M0 32v448h448V32H0z"></path>
    <path fill="#f7df1e" d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/>
</svg>

Standalone SVG Icon

Here’s a proper SVG using the correct colours and shapes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
    <defs/>
    <path fill="#f7df1e" d="M0 0h630v630H0z"/>
    <path d="M165.7 526.5l48.2-29.2c9.3 16.5 17.7 30.4 38 30.4 19.5 0 31.7-7.6 31.7-37.2V289.2h59.2v202.2c0 61.3-35.9 89.2-88.3 89.2-47.4 0-74.9-24.5-88.9-54.1M375 520.1l48.2-27.9c12.7 20.7 29.2 36 58.4 36 24.5 0 40.1-12.3 40.1-29.2 0-20.3-16-27.5-43-39.3l-14.9-6.4c-42.7-18.2-71-41-71-89.2 0-44.4 33.8-78.3 86.7-78.3 37.6 0 64.7 13.2 84.1 47.4l-46 29.6c-10.2-18.2-21.2-25.4-38.1-25.4-17.4 0-28.4 11-28.4 25.4 0 17.8 11 25 36.4 36l14.8 6.3c50.3 21.6 78.6 43.6 78.6 93 0 53.3-41.8 82.5-98 82.5-55 0-90.6-26.2-107.9-60.5"/>
</svg>

Here’s a comparison between the two logos (Font Awesome is on the left, while the proper one is on the right). Notice a slight border on the Font Awesome one.

References

Optimize and compress SVG
https://jakearchibald.github.io/svgomg/

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

👋 Added by Ciprian on Wednesday, September 30, 2020 in Blog, JavaScript. Last modified on Wednesday, September 30, 2020.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy