Glyphs-Css-Tricks-Renamed-2.Pdf

Home , Glyph

11/03/2015 Glyphs | CSS-Tricks

Code Snippets » HTML » Glyphs

LAST UPDATED ON: JANUARY 23, 2012

Special Characters

" " " quotation mark u+0022 ISOnum p:before { content:"\0022"; } alert("\42")

& & & ampersand u+0026 ISOnum p:before { content:"\0026"; } alert("\46")

< < < less-than sign u+003C ISOnum p:before { content:"\003c"; } alert("\74");

> > > greater-than sign u+003E ISOnum p:before { content:"\003e"; } alert("\76");

Latin-1 entity set for HTML

Name Numeric Description Hex ISO in CSS content Octal

no-break space %A0 p:before { content:"\00a0"; } alert("\240");

¡ ¡ ¡ inverted exclamation mark %A1 p:before { content:"\00a1"; } alert("\241");

¢ ¢ ¢ cent sign %A2 p:before { content:"\00a2"; } alert("\242");

£ £ £ pound sterling sign %A3 p:before { content:"\00a3"; } alert("\243");

¤ ¤ ¤ general currency sign %A4 p:before { content:"\00a4"; } alert("\244");

¥ ¥ ¥ yen sign %A5 p:before { content:"\00a5"; } alert("\245");

¦ ¦ ¦ broken (vertical) bar %A6 p:before { content:"\00a6"; } alert("\246");

§ § § section sign %A7 p:before { content:"\00a7"; } alert("\247");

¨ ¨ ¨ umlaut (dieresis) %A8 p:before { content:"\00a8"; } alert("\250");

ª ª ª ordinal indicator, feminine %AA p:before { content:"\00aa"; } alert("\252");

« « « angle quotation mark, left %AB p:before { content:"\00ab"; } alert("\253");

¬ ¬ ¬ not sign %AC p:before { content:"\00ac"; } alert("\254");

soft hyphen %AD p:before { content:"\00ad"; } alert("\255");

https://css-tricks.com/snippets/html/glyphs/ 1/20 11/03/2015 Glyphs | CSS-Tricks ® ® ® registered sign %AE p:before { content:"\00ae"; } alert("\256");

¯ ¯ ¯ macron %AF p:before { content:"\00af"; } alert("\257");

° ° ° degree sign %B0 p:before { content:"\00b0"; } alert("\260");

± ± ± plus-or-minus sign %B1 p:before { content:"\00b1"; } alert("\261");

² ² ² superscript two %B2 p:before { content:"\00b2"; } alert("\262");

³ ³ ³ superscript three %B3 p:before { content:"\00b3"; } alert("\263");

´ ´ ´ acute accent %B4 p:before { content:"\00b4"; } alert("\264");

µ µ µ micro sign %B5 p:before { content:"\00b5"; } alert("\265");

¶ ¶ ¶ pilcrow (paragraph sign) %B6 alert("\266"); p:before { content:"\00b6"; }

· · · middle dot %B7 p:before { content:"\00b7"; } alert("\267");

¸ ¸ ¸ cedilla %B8 p:before { content:"\00b8"; } alert("\270");

¹ ¹ ¹ superscript one %B9 p:before { content:"\00b9"; } alert("\271");

º º º ordinal indicator, masculine %BA p:before { content:"\00ba"; } alert("\272");

» » » angle quotation mark, right %BB p:before { content:"\00bb"; } alert("\273");

¼ ¼ ¼ fraction one-quarter %BC p:before { content:"\00bc"; } alert("\274");

½ ½ ½ fraction one-half %BD p:before { content:"\00bd"; } alert("\275");

¾ ¾ ¾ fraction three-quarters %BE p:before { content:"\00be"; } alert("\276");

¿ ¿ ¿ inverted question mark %BF p:before { content:"\00bf"; } alert("\277");

À À À capital A, grave accent %C0 p:before { content:"\00c0"; } alert("\300");

Á Á Á capital A, acute accent %C1 p:before { content:"\00c1"; } alert("\301");

Â Â Â capital A, circumflex accent %C2 p:before { content:"\00c2"; } alert("\302");

Ã Ã Ã capital A, tilde %C3 p:before { content:"\00c3"; } alert("\303");

Ä Ä Ä capital A, dieresis or umlaut mark %C4 p:before { content:"\00c4"; } alert("\304");

Å Å Å capital A, ring %C5 alert("\305"); p:before { content:"\00c5"; }

Æ Æ Æ capital AE diphthong (ligature) %C6 p:before { content:"\00c6"; } alert("\306");

Ç Ç Ç capital C, cedilla %C7 p:before { content:"\00c7"; } alert("\307");

È È È capital E, grave accent %C8 p:before { content:"\00c8"; } alert("\310");

É É É capital E, acute accent %C9 p:before { content:"\00c9"; } alert("\311");

https://css-tricks.com/snippets/html/glyphs/ 2/20 11/03/2015 Glyphs | CSS-Tricks Ê Ê Ê capital E, circumflex accent %CA p:before { content:"\00ca"; } alert("\312");

Ë Ë Ë capital E, dieresis or umlaut mark %CB p:before { content:"\00cb"; } alert("\313");

Ì Ì Ì capital I, grave accent %CC p:before { content:"\00cc"; } alert("\314");

Í Í Í capital I, acute accent %CD p:before { content:"\00cd"; } alert("\315");

Î Î Î capital I, circumflex accent %CE p:before { content:"\00ce"; } alert("\316");

Ï Ï Ï capital I, dieresis or umlaut mark %CF p:before { content:"\00cf"; } alert("\317");

Ð Ð Ð capital Eth, Icelandic %D0 p:before { content:"\00d0"; } alert("\320");

Ñ Ñ Ñ capital N, tilde %D1 p:before { content:"\00d1"; } alert("\321");

Ò Ò Ò capital O, grave accent %D2 p:before { content:"\00d2"; } alert("\322");

Ó Ó Ó capital O, acute accent %D3 p:before { content:"\00d3"; } alert("\323");

Ô Ô Ô %D4 alert("\324"); capital O, circumflex accent p:before { content:"\00d4"; }

Õ Õ Õ capital O, tilde %D5 p:before { content:"\00d5"; } alert("\325");

Ö Ö Ö capital O, dieresis or umlaut mark %D6 p:before { content:"\00d6"; } alert("\326");

× × × multiply sign %D7 p:before { content:"\00d7"; } alert("\327");

Ø Ø Ø capital O, slash %D8 p:before { content:"\00d8"; } alert("\330");

Ù Ù Ù capital U, grave accent %D9 p:before { content:"\00d9"; } alert("\331");

Ú Ú Ú capital U, acute accent %DA p:before { content:"\00da"; } alert("\332");

Û Û Û capital U, circumflex accent %DB p:before { content:"\00db"; } alert("\333");

Ü Ü Ü capital U, dieresis or umlaut mark %DC p:before { content:"\00dc"; } alert("\334");

Ý Ý Ý capital Y, acute accent %DD p:before { content:"\00dd"; } alert("\335");

Þ Þ Þ capital THORN, Icelandic %DE p:before { content:"\00de"; } alert("\336");

ß ß ß small sharp s, German (sz ligature) %DF p:before { content:"\00df"; } alert("\337");

à à à small a, grave accent %E0 p:before { content:"\00e0"; } alert("\340");

á á á small a, acute accent %E1 p:before { content:"\00e1"; } alert("\341");

â â â small a, circumflex accent %E2 p:before { content:"\00e2"; } alert("\342");

ã ã ã small a, tilde %E3 p:before { content:"\00e3"; } alert("\343");

ä ä ä small a, dieresis or umlaut mark %E4 p:before { content:"\00e4"; } alert("\344");

å å å small a, ring %E5 p:before { content:"\00e5"; } alert("\345");

https://css-tricks.com/snippets/html/glyphs/ 3/20 11/03/2015 Glyphs | CSS-Tricks æ æ æ small ae diphthong (ligature) %E6 p:before { content:"\00e6"; } alert("\346");

ç ç ç small c, cedilla %E7 p:before { content:"\00e7"; } alert("\347");

è è è small e, grave accent %E8 p:before { content:"\00e8"; } alert("\350");

é é é small e, acute accent %E9 p:before { content:"\00e9"; } alert("\351");

ê ê ê small e, circumflex accent %EA p:before { content:"\00ea"; } alert("\352");

ë ë ë small e, dieresis or umlaut mark %EB p:before { content:"\00eb"; } alert("\353");

ì ì ì small i, grave accent %EC p:before { content:"\00ec"; } alert("\354");

í í í small i, acute accent %ED p:before { content:"\00ed"; } alert("\355");

î î î small i, circumflex accent %EE p:before { content:"\00ee"; } alert("\356");

ï ï ï small i, dieresis or umlaut mark %EF p:before { content:"\00ef"; } alert("\357");

ð ð ð small eth, Icelandic %F0 p:before { content:"\00f0"; } alert("\360");

ñ ñ ñ small n, tilde %F1 p:before { content:"\00f1"; } alert("\361");

ò ò ò small o, grave accent %F2 p:before { content:"\00f2"; } alert("\362");

ó ó ó small o, acute accent %F3 p:before { content:"\00f3"; } alert("\363");

ô ô ô small o, circumflex accent %F4 p:before { content:"\00f4"; } alert("\364");

õ õ õ small o, tilde %F5 p:before { content:"\00f5"; } alert("\365");

ö ö ö small o, dieresis or umlaut mark %F6 p:before { content:"\00f6"; } alert("\366");

÷ ÷ ÷ divide sign %F7 p:before { content:"\00f7"; } alert("\367");

ø ø ø small o, slash %F8 p:before { content:"\00f8"; } alert("\370");

ù ù ù small u, grave accent %F9 p:before { content:"\00f9"; } alert("\371");

ú ú ú small u, acute accent %FA p:before { content:"\00fa"; } alert("\372");

û û û small u, circumflex accent %FB p:before { content:"\00fb"; } alert("\373");

ü ü ü small u, dieresis or umlaut mark %FC p:before { content:"\00fc"; } alert("\374");

ý ý ý small y, acute accent %FD p:before { content:"\00fd"; } alert("\375");

þ þ þ small thorn, Icelandic %FE p:before { content:"\00fe"; } alert("\376");

ÿ ÿ ÿ small y, dieresis or umlaut mark %FF p:before { content:"\00ff"; } alert("\377");

Latin Extended-A

u+0152 p:before { https://css-tricks.com/snippets/html/glyphs/ 4/20 11/03/2015 Glyphs | CSS-Tricks Œ Œ Œ latin capital ligature oe ISOlat2 content:"\0152"; } alert("\u0152");

latin small ligature oe u+0153 p:before { œ œ œ (ligature is a misnomer, this is a separate alert("\u0153"); ISOlat2 content:"\0153"; } character in some languages)

u+0160 p:before { Š Š Š latin capital letter s with caron alert("\u0160"); ISOlat2 content:"\0160"; }

u+0161 p:before { š š š latin small letter s with caron alert("\u0161"); ISOlat2 content:"\0161"; }

u+0178 p:before { Ÿ Ÿ Ÿ latin capital letter y with diaeresis alert("\u0178"); ISOlat2 content:"\0178"; }

Latin Extended-B

latin small f with hook, a.k.a. function, u+0192 p:before { ƒ ƒ ƒ alert("\u0192"); a.k.a. florin ISOtech content:"\0192"; }

Spacing Modifier Letters

ˆ ˆ modifier letter circumflex accent u+02C6 ISOpub p:before { content:"\02c6"; } alert("\u02c6");

˜ ˜ small tilde u+02DC ISOdia p:before { content:"\02dc"; } alert("\u02dc");

Greek

p:before { Α Α Α greek capital letter alpha u+0391 alert("\u0391"); content:"\0391"; }

p:before { Β Β Β greek capital letter beta u+0392 alert("\u0392"); content:"\0392"; }

u+0393 p:before { Γ Γ Γ greek capital letter gamma alert("\u0395"); ISOgrk3 content:"\0393"; }

u+0394 p:before { Δ Δ Δ greek capital letter delta alert("\u0394"); ISOgrk3 content:"\0394"; }

p:before { Ε Ε Ε greek capital letter epsilon u+0395 alert("\u0395"); content:"\0395"; }

p:before { Ζ Ζ Ζ greek capital letter zeta u+0396 alert("\u0396"); content:"\0396"; } https://css-tricks.com/snippets/html/glyphs/ 5/20 11/03/2015 Glyphs | CSS-Tricks

&Eta ; Η Η greek capital letter eta u+0397 p:before { alert("\u0397"); content:"\0397"; }

u+0398 p:before { Θ Θ Θ greek capital letter theta alert("\u0398"); ISOgrk3 content:"\0398"; }

p:before { Ι Ι Ι greek capital letter iota u+0399 alert("\u0399"); content:"\0399"; }

p:before { Κ Κ Κ greek capital letter kappa u+039A alert("\u039a"); content:"\039a"; }

u+039B p:before { Λ Λ Λ greek capital letter lambda alert("\u039b"); ISOgrk3 content:"\039b"; }

p:before { &Mu ; Μ Μ greek capital letter mu u+039C alert("\u039c"); content:"\039c"; }

p:before { &Nu ; Ν Ν greek capital letter nu u+039D alert("\u039D"); content:"\039d"; }

u+039E p:before { &Xi ; Ξ Ξ greek capital letter xi alert("\u039e"); ISOgrk3 content:"\039e"; }

greek capital letter p:before { Ο Ο Ο u+039F alert("\u039f"); omicron content:"\039f"; }

u+03A0 p:before { &Pi ; Π Π greek capital letter pi alert("\u03a0"); ISOgrk3 content:"\03a0"; }

p:before { &Rho ; Ρ Ρ greek capital letter rho u+03A1 alert("\u03a1"); content:"\03a1"; }

there is no Sigmaf, and no u+03A2 character either)

u+03A3 p:before { Σ Σ Σ greek capital letter sigma alert("\u03A3"); ISOgrk3 content:"\03a3"; }

p:before { &Tau ; Τ Τ greek capital letter tau u+03A4 alert("\u03A4"); content:"\03a4"; }

Υ Υ Υ u+03A5 p:before { alert("\u03A5"); greek capital letter upsilon ISOgrk3 content:"\03a5"; }

u+03A6 p:before { &Phi ; Φ Φ greek capital letter phi alert("\u03A6"); ISOgrk3 content:"\03a6"; }

p:before { &Chi ; Χ Χ greek capital letter chi u+03A7 alert("\u03A7"); content:"\03a7"; }

u+03A8 p:before { &Psi ; Ψ Ψ greek capital letter psi alert("\u03A8"); ISOgrk3 content:"\03a8"; }

u+03A9 p:before { Ω Ω Ω greek capital letter omega alert("\u03A9"); https://css-tricks.com/snippets/html/glyphs/ 6/20 11/03/2015 Glyphs | CSS-Tricks ISOgrk3 content:"\03a9"; }

u+03B1 p:before { α α α greek small letter alpha alert("\u03b1"); ISOgrk3 content:"\03b1"; }

u+03B2 p:before { β β β greek small letter beta alert("\u03b2"); ISOgrk3 content:"\03b2"; }

u+03B3 p:before { γ γ γ greek small letter gamma alert("\u03b3"); ISOgrk3 content:"\03b3"; }

u+03B4 p:before { δ δ δ greek small letter delta alert("\u03b4"); ISOgrk3 content:"\03b4"; }

u+03B5 p:before { ε ε ε greek small letter epsilon alert("\u03b5"); ISOgrk3 content:"\03b5"; }

u+03B6 p:before { ζ ζ ζ greek small letter zeta alert("\u03b6"); ISOgrk3 content:"\03b6"; }

u+03B7 p:before { &eta ; η η greek small letter eta alert("\u03b7"); ISOgrk3 content:"\03b7"; }

u+03B8 p:before { θ θ θ greek small letter theta alert("\u03b8"); ISOgrk3 content:"\03b8"; }

u+03B9 p:before { ι ι ι greek small letter iota alert("\u03b9"); ISOgrk3 content:"\03b9"; }

u+03BA p:before { κ κ κ greek small letter kappa alert("\u03ba"); ISOgrk3 content:"\03ba"; }

λ λ λ u+03BB p:before { alert("\u03bb"); greek small letter lambda ISOgrk3 content:"\03bb"; }

u+03BC p:before { &mu ; μ μ greek small letter mu alert("\u03bc"); ISOgrk3 content:"\03bc"; }

u+03BD p:before { &nu ; ν ν greek small letter nu alert("\u03bd"); ISOgrk3 content:"\03bd"; }

u+03BE p:before { &xi ; ξ ξ greek small letter xi alert("\u03be"); ISOgrk3 content:"\03be"; }

p:before { ο ο ο greek small letter omicron u+03BF NEW alert("\u03bf"); content:"\03bf"; }

u+03C0 p:before { &pi ; π π greek small letter pi alert("\u03c0"); ISOgrk3 content:"\03c0"; }

u+03C1 p:before { &rho ; ρ ρ greek small letter rho alert("\u03c1"); ISOgrk3 content:"\03c1"; }

greek small letter final u+03C2 p:before { https://css-tricks.com/snippets/html/glyphs/ 7/20 11/03/2015 Glyphs | CSS-Tricks ς ς ς sigma ISOgrk3 content:"\03C2"; } alert("\u03c2");

u+03C3 p:before { σ σ σ greek small letter sigma alert("\u03c3"); ISOgrk3 content:"\03C3"; }

u+03C4 p:before { &tau ; τ τ greek small letter tau alert("\u03c4"); ISOgrk3 content:"\03C4"; }

u+03C5 p:before { υ υ υ greek small letter upsilon alert("\u03c5"); ISOgrk3 content:"\03C5"; }

u+03C6 p:before { &phi ; φ φ greek small letter phi alert("\03c6"); ISOgrk3 content:"\03C6"; }

u+03C7 p:before { &chi ; χ χ greek small letter chi alert("\u03c7"); ISOgrk3 content:"\03C7"; }

u+03C8 p:before { &psi ; ψ ψ greek small letter psi alert("\u03c8"); ISOgrk3 content:"\03C8"; }

u+03C9 p:before { ω ω ω greek small letter omega alert("\u03c9"); ISOgrk3 content:"\03C9"; }

ϑ ϑ ϑ greek small letter theta p:before { alert("\u03D1"); symbol u+03D1 NEW content:"\03D1"; }

greek upsilon with hook p:before { ϒ ϒ ϒ u+03D2 NEW alert("\u03D2"); symbol content:"\03D2"; }

u+03D6 p:before { &piv ; ϖ ϖ greek pi symbol alert("\u03D6"); ISOgrk3 content:"\03D6"; }

Punctuation

u+2002 p:before { en space alert("\u2002"); ISOpub content:"\2002";}

u+2003 p:before { em space alert("\u2003"); ISOpub content:"\2003";}

u+2009 p:before { thin space alert("\u2009"); ISOpub content:"\2009";}

u+200C NEW p:before { ‌ ‌ zero width non-joiner alert("\u200C"); RFC 2070 content:"\200C";}

u+200D NEW p:before { ‍ ‍ zero width joiner alert("\u200d"); RFC 2070 content:"\200D";}

u+200E NEW p:before { https://css-tricks.com/snippets/html/glyphs/ 8/20 11/03/2015 Glyphs | CSS-Tricks ‎ ‎ left-to-right mark RFC 2070 content:"\200E";} alert("\u200e");

u+200F NEW p:before { ‏ ‏ right-to-left mark alert("\u200f"); RFC 2070 content:"\200F";}

u+2013 p:before { – – – en dash alert("\u2013"); ISOpub content:"\2013";}

u+2014 p:before { — — — em dash alert("\u2014"); ISOpub content:"\2014";}

u+2018 p:before { ‘ ‘ ‘ left single quotation mark alert("\u2018"); ISOnum content:"\2018";}

u+2019 p:before { ’ ’ ’ right single quotation mark alert("\u2019"); ISOnum content:"\2019";}

p:before { ‚ ‚ ‚ single low-9 quotation mark u+201A NEW alert("\u201a"); content:"\201A";}

u+201C p:before { “ “ “ left double quotation mark alert("\u201c"); ISOnum content:"\201C";}

u+201D p:before { ” ” ” right double quotation mark alert("\u201d"); ISOnum content:"\201D";}

p:before { „ „ „ double low-9 quotation mark u+201E NEW alert("\u201e"); content:"\201E";}

u+2020 p:before { &dagger; † † dagger alert("\u2020"); ISOpub content:"\2020";}

u+2021 p:before { ‡ ‡ ‡ double dagger alert("\u2021"); ISOpub content:"\2021";}

u+2030 p:before { ‰ ‰ ‰ per mille sign alert("\u2030"); ISOtech content:"\2030";}

single left-pointing angle quotation mark u+2039 ISO p:before { ‹ ‹ ‹ alert("\u2039"); (lsaquo is proposed but not yet proposed content:"\2039";} ISO standardised)

single right-pointing angle quotation mark u+203A ISO p:before { › › › alert("\u203a"); rsaquo is proposed but not yet proposed content:"\203A";} ISO standardised

General Punctuation

bullet, a.k.a. black small circle u+2022 ISOpub https://css-tricks.com/snippets/html/glyphs/ 9/20 11/03/2015 Glyphs | CSS-Tricks • • • bullet is NOT the same as bullet operator — u+2219 alert("\u2219");

… … … horizontal ellipsis, a.k.a. three dot leader u+2026 ISOpub alert("\u2026");

′ ′ ′ prime, a.k.a. minutes, a.k.a. feet u+2032 ISOtech alert("\u2032");

″ ″ ″ double prime, a.k.a. seconds, a.k.a. inches u+2033 ISOtech alert("\u2033");

‾ ‾ ‾ overline, a.k.a. spacing overscore u+203E NEW alert("\u203e");

⁄ ⁄ ⁄ fraction slash u+2044 NEW alert("\u8260");

Letterlike Symbols

u+2118 ℘ ℘ ℘ script capital P, a.k.a. power set, a.k.a. Weierstrass p alert("\u2118"); ISOamso

u+2111 ℑ ℑ ℑ blackletter capital I, a.k.a. imaginary part alert("\u2111"); ISOamso

u+211C ℜ ℜ ℜ blackletter capital R, a.k.a. real part symbol alert("\u211c"); ISOamso

u+2122 ™ ™ ™ trade mark sign alert("\u2122"); ISOnum

alef symbol, a.k.a. first transfinite cardinal alef symbol is NOT the same as hebrew letter alef — u+2135 ℵ ℵ ℵ alert("\u"); u+05D0 although the same glyph NEW could be used to depict both characters

Arrows

u+2190 ← ← ← leftwards arrow alert("\u2190"); ISOnum

u+2191 ↑ ↑ ↑ upwards arrow alert("\u2191"); ISOnum

u+2192 → → → rightwards arrow alert("\u2192"); ISOnum

u+2193 ↓ ↓ ↓ downwards arrow alert("\u2193"); ISOnum

u+2194 ↔ ↔ ↔ left right arrow ISOamsa alert("\u2194"); https://css-tricks.com/snippets/html/glyphs/ 10/20 11/03/2015 Glyphs | CSS-Tricks

downwards arrow with corner leftwards, a.k.a. carriage ↵ ↵ ↵ u+21B5 NEW alert("\u21b5"); return

leftwards double arrow u+21D0 ⇐ ⇐ ⇐ alert("\u21d0"); can be used for ‘is implied by’ ISOtech

u+21D1 ⇑ ⇑ ⇑ upwards double arrow alert("\u21d1"); ISOamsa

u+21D2 ⇒ ⇒ ⇒ rightwards double arrow alert("\u21d2"); ISOtech

u+21D3 ⇓ ⇓ ⇓ downwards double arrow alert("\ud1d3"); ISOamsa

u+21D4 ⇔ ⇔ ⇔ left right double arrow alert("\u21d4"); ISOamsa

Mathematical Operators

u+2200 ∀ ∀ ∀ for all alert("\u2200"); ISOtech

u+2202 ∂ ∂ ∂ partial differential alert("\u2202"); ISOtech

u+2203 ∃ ∃ ∃ there exists alert("\u2203"); ISOtech

u+2205 ∅ ∅ ∅ empty set, a.k.a. null set, a.k.a. diameter alert("\u2205"); ISOamso

u+2207 ∇ ∇ ∇ nabla, a.k.a. backward difference alert("\u2207"); ISOtech

u+2208 ∈ ∈ ∈ element of alert("\u2208"); ISOtech

u+2209 ∉ ∉ ∉ not an element of alert("\u2209"); ISOtech

u+220B &ni ; ∋ ∋ contains as member alert("\u220b"); ISOtech

n-ary product, a.k.a. product sign prod is NOT the same character as u+03A0 ‘greek capital u+220F ∏ ∏ ∏ letter pi’ though the same ISOamsb alert("\u03a0"); glyph might be used for both

https://css-tricks.com/snippets/html/glyphs/ 11/20 11/03/2015 Glyphs | CSS-Tricks

n-ary sumation u+2211 &sum ; ∑ ∑ alert("\u03a3"); sum is NOT the same character as u+03A3 ‘greek capital ISOamsb letter sigma’ though the same glyph might be used for both

u+2212 − − − minus sign alert("\u2212"); ISOtech

u+2217 ∗ ∗ ∗ asterisk operator alert("\u2217"); ISOtech

u+221A √ √ √ square root, a.k.a. radical sign alert("\u221a"); ISOtech

u+221D ∝ ∝ ∝ proportional to alert("\u221d"); ISOtech

u+221E ∞ ∞ ∞ infinity alert("\u221e"); ISOtech

u+2220 &ang ; ∠ ∠ angle alert("\u2220"); ISOamso

u+2227 &and ; ⊥ ⊥ logical and, a.k.a. wedge alert("\u2227"); ISOtech

u+2228 &or ; ⊦ ⊦ logical or, a.k.a. vee alert("\u2228"); ISOtech

u+2229 &cap ; ∩ ∩ intersection, a.k.a. cap alert("\u2229"); ISOtech

u+222A &cup ; ∪ ∪ union, a.k.a. cup alert("\u222a"); ISOtech

u+222B &int ; ∫ ∫ integral alert("\u222b"); ISOtech

u+2234 ∴ ∴ ∴ therefore alert("\u2234"); ISOtech

tilde operator, a.k.a. varies with, similar to tilde operator, but is NOT the same character as u+223C &sim ; ∼ ∼ alert("\u223c"); the tilde u+007E, ISOtech although the same glyph might be used to represent both

u+2245 ≅ ≅ ≅ approximately equal to alert("\u2245"); ISOtech

u+2248 ≈ ≈ ≈ almost equal to, a.k.a. asymptotic to alert("\u2248"); ISOamsr

u+2260 &ne ; ≠ ≠ not equal to alert("\u2260"); ISOtech https://css-tricks.com/snippets/html/glyphs/ 12/20 11/03/2015 Glyphs | CSS-Tricks

u+2261 ≡ ≡ ≡ identical to alert("\u2261"); ISOtech

u+2264 &le ; ≤ ≤ less-than or equal to alert("\u2264"); ISOtech

u+2265 &ge ; ≥ ≥ greater-than or equal to alert("\u2265"); ISOtech

u+2282 &sub ; ⊂ ⊂ subset of alert("\u2282"); ISOtech

superset of note that nsup, ‘not a superset of u+2283′ is not covered u+2283 &sup ; ⊃ ⊃ alert("\u2283"); by the Symbol font ISOtech encoding and is not included.

u+2284 ⊄ ⊄ ⊄ not a subset of alert("\u2284"); ISOamsn

u+2286 ⊆ ⊆ ⊆ subset of or equal to alert("\u2286"); ISOtech

u+2287 ⊇ ⊇ ⊇ superset of or equal to alert("\u2287"); ISOtech

u+2295 ⊕ ⊕ ⊕ circled plus, a.k.a. direct sum alert("\u2295"); ISOamsb

u+2297 ⊗ ⊗ ⊗ circled times, a.k.a. vector product alert("\u2297"); ISOamsb

u+22A5 ⊥ ⊥ ⊥ up tack, a.k.a. orthogonal to, a.k.a. perpendicular alert("\u22a5"); ISOtech

dot operator u+22C5 ⋅ ⋅ ⋅ dot operator is NOT the same character as u+00B7 middle alert("\u22c5"); ISOamsb dot

Miscellaneous Technical

u+2308, ⌈ ⌈ ⌈ left ceiling, a.k.a. apl upstile alert("\u2308"); ISOamsc

u+2309, ⌉ ⌉ ⌉ right ceiling alert("\u2309"); ISOamsc

u+230A, ⌊ ⌊ ⌊ left floor, a.k.a. apl downstile alert("\u230a"); ISOamsc

https://css-tricks.com/snippets/html/glyphs/ 13/20 11/03/2015 Glyphs | CSS-Tricks ⌋ ⌋ ⌋ right floor u+230B, alert("\u230b"); ISOamsc

left-pointing angle bracket, a.k.a. bra ⟨ 〈 〈 lang is NOT the same character as u+003C ‘less than’ u+2329 ISOtech alert("\u2329"); or u+2039 ’single left-pointing angle quotation mark’

right-pointing angle bracket, a.k.a. ket rang is NOT the same character as u+003E ‘greater ⟩ 〉 〉 than’ u+232A ISOtech alert("\u232a"); or u+203A ’single right-pointing angle quotation mark’

Geometric Shapes

&loz ; ◊ ◊ lozenge u+25CA ISOpub alert("\u25ca");

Miscellaneous Symbols

♠ ♠ ♠ black spade suit u+2660 ISOpub alert("\u2660");

♣ ♣ ♣ black club suit, a.k.a. shamrock u+2663 ISOpub alert("\u2663");

♥ ♥ ♥ black heart suit, a.k.a. valentine u+2665 ISOpub alert("\u2665");

♦ ♦ ♦ black diamond suit u+2666 ISOpub alert("\u2666");

Reference URL

https://css-tricks.com/snippets/html/glyphs/ 14/20 11/03/2015 Glyphs | CSS-Tricks

Comments

jomko Reply ↓ # M A Y 3 0 , 2 0 1 0 ☠

Oren Reply ↓ # J U N E 1 , 2 0 1 0 I am using this search engine to look for glyphs:

http://leftlogic.com/lounge/articles/entity-lookup/

Jon Reply ↓ # S E P T E M B E R 8 , 2 0 1 1 I found an awesome list of Unicode symbols and dingbats that extend the list above… http://inamidst.com/stuff/unidata

Marcy Reply ↓ # D E C E M B E R 2 , 2 0 1 1 What is the :before ISO entity for a bullet (•) ??

Micah Reply ↓ # J A N U A R Y 5 , 2 0 1 2

selector:before { https://css-tricks.com/snippets/html/glyphs/ 15/20 11/03/2015 Glyphs | CSS-Tricks content: "\2022"; }

This works for creating a bullet Marcy.

Brahmanand Gorati # J U N E 6 , 2 0 1 4 Thank you!!

Ed Reply ↓ # J A N U A R Y 9 , 2 0 1 2 Here are a ton of the math entities.

https://docs.google.com/spreadsheet/pub? hl=en_US&hl=en_US&key=0AlhWX3BA2PNwdDZBTjdiRV93R3c0dkJnNFlaMmV2a3c&output=html

roydukkey Reply ↓ # F E B R U A R Y 2 5 , 2 0 1 3 Just wanted to provide this resource as a variable plugin for LESS. The codes are also fixed to protect against entity code pollution.

roydukkey # A P R I L 3 , 2 0 1 3 Guess I forgot the link?

https://github.com/roydukkey/glyph.less

https://css-tricks.com/snippets/html/glyphs/ 16/20 11/03/2015 Glyphs | CSS-Tricks

megadroid Reply ↓ # N O V E M B E R 1 4 , 2 0 1 3 If you’re on OS X go to System Preferences > Language & Text > Input Sources and enable:

Keyboard & Character Viewer Unicode Hex Input Show Input menu in menu bar

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.

Blueprint Reply ↓ # D E C E M B E R 2 0 , 2 0 1 3 Also I need ^..sign !!

Jeff # S E P T E M B E R 2 2 , 2 0 1 4 You ever find one?

https://css-tricks.com/snippets/html/glyphs/ 17/20 11/03/2015 Glyphs | CSS-Tricks

Michael Su Reply ↓ # M A R C H 8 , 2 0 1 4 ♥!

Kebten Reply ↓ # M A R C H 2 3 , 2 0 1 4 How can we represent £3.00 for example – my hack was content: “0a3\33.00″

Jason Reply ↓ # M A R C H 2 6 , 2 0 1 4 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:

http://jsfiddle.net/jasonbdesign/x8yhs/3/

I just made a typical drop down arrow in adobe illustrator, but you could really create anything.

uday Reply ↓ # A U G U S T 1 5 , 2 0 1 4 is there any way to convert numberic to iso in css