I Fixed Font Awesome JavaScript Logo

🙂 Like
🙂Like 🥰Love 🧐Watching this 🤨Suspicious 😒Meh 😡Angry
🙂1

#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

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles

%d bloggers like this:
Privacy Policy