Forem Creators and Builders

loading...
Cover image for Icons for your Forem Instance

Icons for your Forem Instance

Nick Taylor (he/him)
Lead software developer at Forem. Caught the live coding bug on Twitch at livecoding.ca
・1 min read

Hey wonderful self-hosters! So I launched my community a couple of weeks ago, https://community.vscodetips.com. I was working on adding some navigation links for the left sidebar. I initally started with the Twemoji icons as that's what we use for the other icons in the Forem codebase.

GitHub logo twitter / twemoji

Emoji for everyone. https://twemoji.twitter.com/

Twitter Emoji (Twemoji) Build Status

A simple library that provides standard Unicode emoji support across all platforms.

Twemoji v13.1 adheres to the Unicode 13.0 spec and supports the Emoji 13.1 spec. We do not support custom emoji.

The Twemoji library offers support for 3,521 Unicode-defined emojis.

Usage

CDN Support

The folks over at MaxCDN have graciously provided CDN support.

Use the following in the <head> tag of your HTML document(s):

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

This guarantees that you will always use the latest version of the library.

If, instead, you'd like to include the latest version explicitly, you can add the following tag:

<script src="https://twemoji.maxcdn.com/v/13.1.0/twemoji.min.js" integrity="sha384-gPMUf7aEYa6qc3MgqTrigJqf4gzeO6v11iPCKv+AP2S4iWRWCoWyiR+Z7rWHM/hU" crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

Download

If instead you want to download a specific version, please look at the gh-pages branch, where you will find…

I thought they were OK, but wanted to find something else. I remembered Josh W. Comeau talking about Feather Icons.

They're SVG and MIT licensed, so I went with those. Here's what it looks like with the Hacker theme enabled.

community.vscodetips.com home page

I'm curious what icons you use in your Forem instance?

Discussion (2)

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Another icon project Josh suggested was the Noun project as long as you attribute the author.

Collapse
ellativity profile image
Ella Ang (she/her/elle)

Those Feather icons look so great on your Forem @nickytonline 😍

I'm inspired now! Thanks for sharing 💛