Click on the flag icon on the menu bar and choose Show Character Viewer.
To add more glyphs click on the gear button on the top-left and choose Customize List.
There’s also a search field, just enter star or arrow, for example.

To type an actual glyph, just click on the flag icon on the menu bar and choose Unicode Hex Input. Then just hold the ⌥ Option key and type a Unicode code, for example, 2325.

You could theoretically create an svg of whatever you want then convert it to base64 code as Chris mentioned in another post. (Using SVG). I’m not positive, but I believe glyphs are drawn using svg anyway.

Needless to say it’s a lot easier just to use an existing glyph but here’s an svg example:

This page was made 6 yrs ago, so things may have changed, but using the codes above I found the following when using for CSS property “content” with pseudo-selector “:before” or “:after”:

remove any zeros before the numbers or letters in the code. Example if you see “\00153” becomes “\153”, or “\0161” becomes “\161”, or “\00ae” becomes “\ae”. The zeros cause an error.
remove the letter “u” and / or “+” sign, same reason. Example: “u+2026” becomes “\2026”.
If a number does not work, use the alert version this way, “\2022 ” does not render anything, then use the alert version of “\u2219” and make it “\2219”

I have not tested them all, but that is what I found with what I did test and it appears consistent throughout.

Yes you can use the keyboard plus sign character, but there are many places on the web that provide the Unicode, Hexcode and HTML codes you need to insert neat and cool characters. In particular, for my response here, I used this reference page >> https://www.toptal.com/designers/htmlarrows/symbols/

Scroll down to Heavy Greek Cross (or use find in page), you see the Unicode for the cross as, U+0271A

As I mentioned above, to use this in the CSS pseudo content, remove the “U”, “+” and “0”. Then it will look like this, content: ‘\271A’;

Search the web for these tables or lists and favourite a few of them, since some do provide different characters over the others.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.