【问题标题】:Unicode symbols list for CSS before content内容前 CSS 的 Unicode 符号列表
【发布时间】:2017-08-10 10:23:26
【问题描述】:

我搜索了各种 unicode 列表,例如 this one,但到目前为止还没有找到列出 \0108 的列表,这是一种类似于 font-awesome 的替代美元符号,但也有其他从 0101 到 0113 的我没有看到列出来。

是否有一些未记录的字符或者可能是对自定义 font.ttf 文件中图标的引用?十六进制引用可以与自定义字体文件一起使用吗?

【问题讨论】:

  • "\0108 这是一个类似于 font-awesome 的替代美元符号"Are you sure about that?
  • 只是想知道它是否可以引用自定义 font.ttf 文件中的图标?
  • 我找到了自定义的 ttf 文件,它没有在 Windows 字体查看器中显示符号,但是当安装并在字符映射中查看时,它会显示并且代码确实对应。

标签: css unicode


【解决方案1】:

你应该使用这个代码:

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>

有用的符号:

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/

【讨论】:

    【解决方案2】:

    我发现我正在编辑的系统正在使用自定义字体 ttf 文件,并且 css 文件中的 unicode 引用对应于 Windows 字符映射中看到的那些。我发现 this post 关于创建私人角色很有用。

    【讨论】:

      猜你喜欢
      • 2015-01-30
      • 2020-06-04
      • 2012-03-03
      • 1970-01-01
      • 2015-05-30
      • 2012-05-10
      • 2016-04-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多