Web Development
Web Development

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.

openanalytics 268560 views

I'm a 34 year old UIUC Computer Engineer building mobile apps, websites and hardware integrations with an interest in 3D printing, biotechnology and Arduinos.


View Comments
There are currently no comments.

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