How to: Add fa-mastodon to Older Font Awesome

If you went to use the fa-mastodon but instead got a blank glyph, chances are you are running an old Font Awesome.

The best fix is to just upgrade to Font Awesome v5.0.11 or higher but sometimes you are working on apps that make the best path difficult to actually do. For example, this site uses a third party theme which is loading font awesome v4 and doesn’t appreciate the upgrade. I could load an entire second newer one but I just want one new icon.

This will override and add in the mastodon logo to older installs.

In your custom css file, just add:

.fa-mastodon{
  height: 13px;
  width: 12px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjMxIDI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KPHBhdGggZD0ibTE2NC41MyAxODguNjJjMzEuMDA4LTMuNzAyIDU4LjAwNy0yMi44MDggNjEuNC00MC4yNjUgNS4zNDctMjcuNSA0LjkwNS02Ny4xMDkgNC45MDUtNjcuMTA5IDAtNTMuNjg1LTM1LjE3My02OS40MjEtMzUuMTczLTY5LjQyMS0xNy43MzUtOC4xNDUzLTQ4LjE4OC0xMS41NzEtNzkuODI3LTExLjgyOWgtMC43NzdjLTMxLjYzOSAwLjI1ODY3LTYyLjA3MiAzLjY4NC03OS44MDggMTEuODI5IDAgMC0zNS4xNzUgMTUuNzM2LTM1LjE3NSA2OS40MjEgMCAzLjI1NDYtMC4wMTY4MjIgNi42Nzc4LTAuMDM0MzM0IDEwLjI0MS0wLjA0ODYzNCA5Ljg5NjktMC4xMDI1OSAyMC44NzggMC4xODM2NyAzMi4zMzkgMS4yNzczIDUyLjUwMSA5LjYyNTMgMTA0LjI0IDU4LjE2NyAxMTcuMDkgMjIuMzgxIDUuOTI0IDQxLjU5NyA3LjE2NCA1Ny4wNzQgNi4zMTMgMjguMDY1LTEuNTU2IDQzLjgyLTEwLjAxNiA0My44Mi0xMC4wMTZsLTAuOTI2LTIwLjM2M3MtMjAuMDU2IDYuMzI0LTQyLjU4IDUuNTU0Yy0yMi4zMTYtMC43NjYtNDUuODc0LTIuNDA3LTQ5LjQ4NC0yOS44MDYtMC4zMzM0LTIuNDA2LTAuNS00Ljk4LTAuNS03LjY4MiAwIDAgMjEuOTA3IDUuMzU0IDQ5LjY3IDYuNjI2IDE2Ljk3NiAwLjc3OSAzMi44OTYtMC45OTQgNDkuMDY1LTIuOTI0em0yNC44MTYtMzguMjA2di02NS4wMDRjMC0xMy4yODUtMy4zODMtMjMuODQzLTEwLjE3Ni0zMS42NTMtNy4wMDgtNy44MTA2LTE2LjE4NC0xMS44MTUtMjcuNTczLTExLjgxNS0xMy4xOCAwLTIzLjE2IDUuMDY1NC0yOS43NTggMTUuMTk3bC02LjQxNiAxMC43NTMtNi40MTQtMTAuNzUzYy02LjU5OS0xMC4xMzItMTYuNTc5LTE1LjE5Ny0yOS43NTgtMTUuMTk3LTExLjM5MSAwLTIwLjU2NyA0LjAwNDEtMjcuNTczIDExLjgxNS02Ljc5NDcgNy44MTA3LTEwLjE3NyAxOC4zNjgtMTAuMTc3IDMxLjY1M3Y2NS4wMDRoMjUuNzUzdi02My4wOTNjMC0xMy4zIDUuNTk2LTIwLjA1MSAxNi43ODktMjAuMDUxIDEyLjM3NiAwIDE4LjU4IDguMDA3OSAxOC41OCAyMy44NDN2MzQuNTM1aDI1LjYwMnYtMzQuNTM1YzAtMTUuODM1IDYuMjAyLTIzLjg0MyAxOC41NzgtMjMuODQzIDExLjE5NCAwIDE2Ljc5IDYuNzUwNiAxNi43OSAyMC4wNTF2NjMuMDkzaDI1Ljc1M3oiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iYSI+CjxyZWN0IHdpZHRoPSIyMzAuODQiIGhlaWdodD0iMjQ3LjQ4IiBmaWxsPSIjZmZmIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}

You may need to adjust the height and width above.

Mastodon’s color is #453aab and a nice rollover color is #574db3 or darker #342b80.