CODEWITHSUNDEEP
cssunicode
Nick W
Nick W

Reputation: 907

Unicode symbols list for CSS before content

I've searched various unicode lists like this one, but so far not found one that lists \0108 which is an alternative dollar sign similar to the font-awesome one, but also there are others from 0101 to 0113 which I've not seen listed.

Are there some undocumented characters or might it be a reference to an icon in a custom font.ttf file? Can the hex references be used with custom font files?

Upvotes: 1

Views: 12986

Answers (3)

Chris Dev
Chris Dev

Reputation: 414

To answer the question:

Where can one find the list of Unicode symbols that one can use in the content CSS property?

You can find the official list here: https://www.unicode.org/charts/ There you can also search by the hex code of the character.

Another alternative is this site, where you can also search by the character's description: https://www.fileformat.info/info/unicode/char/search.htm

Code Example:

.line-check::before {
  content: '\02705';
}

.line-cat::before {
  content: '\1F63C';
}
<p class="line-check">Line Check</p>
<p class="line-cat">Line Cat</p>

Upvotes: 0

Nick W
Nick W

Reputation: 907

I found that the system I am editing is using a custom font ttf file and the unicode references in the css file correspond to those seen in the Windows Character Map. I found this post about creating private characters useful.

Upvotes: 0

Chandra Kumar
Chandra Kumar

Reputation: 4205

You should use this code:

body {font: normal 18px/27px menlo, monospace, sans-serif; color: #777;}
.unicode-list li {list-style: none; border-bottom: solid 1px #ccc;}
.link-list li {font: 300 16px/27px helvetica;}
:before {color: #A0002E; display: inline-block; font: normal 20px/20px helvetica; width: 30px; }
a {color: dodgerblue;}

.mail:before           {content: "\2709";}
.phone:before          {content: "\2706";}
.bigarrow:before       {content: "\27BD";}
.open-quote:before     {content: "\275D";}
.close-quote:before    {content: "\275E";}
.openquote:before      {content: "\201C";}
.closequote:before     {content: "\201D";}
.alert:before          {content: "\26A0";}
.checkmark:before      {content: "\2713";}
.ballot:before         {content: "\2717";}
.black-diamond:before  {content: "\2756";}
.phi:before            {content: "\03C6";}
.bullseye:before       {content: "\25CE";}
.arrow-bullet:before   {content: "\25B8";}
.black-diamond:before  {content: "\25C6";}
.white-diamond:before  {content: "\25C7";}
.poison:before         {content: "\2620";}
.happy:before          {content: "\263A";}
.sad:before            {content: "\2639";}
.command:before        {content: "\2318";}
.option:before         {content: "\2325";}
.shift:before          {content: "\21E7";}
.apple:before          {content: "\F8FF";}
.menu:before           {content: "\2630";}
.darr-1:before         {content: "\21B4";}
.darr-2:before         {content: "\25BE";}
.poop:before           {content: "\1f4a9";}
.star:before           {content: "\2605";}
<ul class="unicode-list">
  <li class="mail">2709 - mail</li>
  <li class="phone">2706 - Phone</li>
  <li class="bigarrow">27BD - Big Arrow</li>
  <li class="open-quote">275D - Open Quote</li>
  <li class="close-quote">275E - Close Quote</li>
  <li class="openquote">201C - Open Quote</li>
  <li class="closequote">201D - Close Quote</li>
  <li class="alert">26A0 - Hazard!!</li>
  <li class="checkmark">2713 - checkmark</li>
  <li class="ballot">2717 - Ballot</li>
  <li class="black-diamond">2756 - Black Diamond</li>
  <li class="phi">2756 - Phi</li>
  <li class="bullseye">25CE - Bullseye</li>
  <li class="arrow-bullet">25B8 - Arrow Bullet</li>
  <li class="black-diamond">25C6 - Black Diamond</li>
  <li class="white-diamond">25C7 - White Diamond</li>
  <li class="poison">2620 - Poison</li>
  <li class="happy">263A - Happy</li>
  <li class="sad">2639 - Sad</li>
  <li class="command">2318 - Command</li>
  <li class="option">2325 - Option</li>
  <li class="shift">21E7 - Shift</li>
  <li class="apple">F8FF - apple (not universal)</li>
  <li class="menu">2630 - Menu (&amp;#9776;)</li>
  <li class="darr-1">21B4 - Rightwards arrow with corner downwards (&amp;#8628;)</li>
  <li class="darr-2">25BE - Small Down Triangle (&amp;#x25BE;)</li>
  <li class="poop">1f4a9 - Poop</li>
  <li class="star">2605 - Star</li>
  
</ul>

Useful Symbols:

http://en.wikibooks.org/wiki/Unicode/List_of_useful_symbols

http://www.decodeunicode.org/en/dingbats

http://en.wikipedia.org/wiki/List_of_Unicode_characters

http://www.danshort.com/HTMLentities/

Upvotes: 12

Related Questions