音频和视频控件中的“暂停”符号的HTML


Answers:


105

有多种符号可以被认为是适当的替代品,包括:

  1. | | -两个标准(螺栓连接)竖线。

  2. ▋▋- ▋和另一个▋

  3. ▌▌- ▌和另一个▌

  4. ▍▍- ▍和另一个▍

  5. ▎▎- ▎和另一个▎

  6. ❚❚- ❚和另一个❚

我可能错过了一两个,但是我认为这些是更好的选择。以下是符号列表,以防万一。


我用这个:𝍪。
约书亚记'17

▮ 是HTML中真正的暂停符号。
Fla

@JoshuaD如果要支持多个浏览器,则可能不应该使用该浏览器。我正在使用最新的Firefox,但无法读取。
上帝的孩子

3
我用=transform:rotate(90deg);
乔DF

1
@AChildofGod-与浏览器无关(仅关于浏览器),它取决于计算机上安装的字体。
kubi

173

媒体控制符号的Unicode标准

暂停: ⏸︎

所述的Unicode 标准13.0 (更新2020)提供了其他技术在HEX范围字形2300-23FF

杂项技术

有了丰富的Unicode 13.0文档,我们可以将其与常见的媒体控制符号关联的某些字形如下:

键盘和UI符号

23CF⏏︎弹出媒体

用户界面符号

23E9⏩︎快进
23EA⏪︎后退,快退
23EB⏫︎快速增加
23EC⏬︎快
退23ED⏭︎结束,下一个
23EE⏮︎跳跃开始,上
一个23EF⏯︎播放/暂停切换
23F1⏱︎秒表
23F2⏲︎计时器时钟
23F3⏳︎沙漏
23F4 4 ︎反向,向后
23F5⏵︎向前,下一个播放
23F6⏶︎增加
23F7⏷︎减少
23F8⏸︎暂停
23F9⏹︎停止
23FA⏺︎记录

ISO 7000:2012中的电源符号

23FB⏻︎待机/电源
23FC⏼︎打开/关闭
电源
23FD⏽︎打开2B58⭘︎关闭电源

IEEE 1621-2004中的电源符号

23FE⏾︎动力睡眠

在网络上使用:

必须使用没有BOM的UTF-8编码 保存文件(在大多数开发环境中默认设置),以指示解析器如何将字节正确转换为字符。 应该在HTML文件中之后立即使用,并确保设置了正确的HTTP标头。<meta charset="utf-8"/><head>Content-Type: text/html; charset=utf-8

例子:

的HTML
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
的CSS
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
的JavaScript
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

标准化变体

为了防止从字形是“彩色emojified” ⏩︎/⏩ 追加代码U + FE0E 文本表示选择器,以请求一个标准化变体:(例如:&#x23e9;&#xfe0e;

不一致之处

Unicode范围内的字符易受其使用的字体家族环境,应用程序,浏览器,操作系统,平台的影响。
未知丢失时 -我们可能会看到符号 或▯,或者由于不同供应商在HTML解析器实现上的差异而导致行为不一致
例如,在Windows Chromium浏览器上,标准变体后缀U + FE0E有错误,并且此类符号最好与CSS一起使用,即: font-family: "Segoe UI Symbol"将特定字体强加在有色表情符号上(通常称为“ Segoe UI表情符号”)-首先是U + FE0E的目的-时间会证明……


可缩放图标字体

为了规避与不受支持的字符有关的问题,一种可行的解决方案是使用可缩放的图标字体集,例如:

字体很棒

播放器图标-可扩展-字体超赞

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-arrows-alt"></i>
<i class="fa fa-backward"></i>
<i class="fa fa-compress"></i>
<i class="fa fa-eject"></i>
<i class="fa fa-expand"></i>
<i class="fa fa-fast-backward"></i>
<i class="fa fa-fast-forward"></i>
<i class="fa fa-forward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-stop"></i>
<i class="fa fa-youtube-play"></i>

Google 图标

在此处输入图片说明

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">pause</i>
<i class="material-icons">pause_circle_filled</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">fast_forward</i>
<i class="material-icons">fast_rewind</i>
<i class="material-icons">fiber_manual_record</i>
<i class="material-icons">play_arrow</i>
<i class="material-icons">play_circle_filled</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">skip_next</i>
<i class="material-icons">skip_previous</i>
<i class="material-icons">replay</i>
<i class="material-icons">repeat</i>
<i class="material-icons">stop</i>
<i class="material-icons">loop</i>
<i class="material-icons">mic</i>
<i class="material-icons">volume_up</i>
<i class="material-icons">volume_down</i>
<i class="material-icons">volume_mute</i>
<i class="material-icons">volume_off</i>

还有许多其他你可以在野外找到的东西;最后但并非最不重要的一点是,这个非常有用的在线工具:字体图标生成器Icomoon.io



2
谢谢队友,真的很有帮助的答案。
Daniel Barde

1
令人讨厌的是,Google字体/图标中没有“圈出停止”按钮,因此它们的“圈出播放”和“圈出暂停”设置不完整...
Fizz


很棒的答案-我喜欢付出的努力。您是否注意到官方的“ ISO 7000 / IEC 60417暂停符号;中断为#5111B。请参阅Media_Controls”,@ intotecho在此被低估的答案中指出了这一点?→ stackoverflow.com
a/48918561/4575793

57

以下可能会派上用场:

  • &#x23e9;
  • &#x23ea;
  • &#x24eb;
  • &#x23ec;
  • &#x23ed;
  • &#x23ee;
  • &#x23ef;
  • &#x23f4;
  • &#x23f5;
  • &#x23f6;
  • &#x23f7;
  • &#x23f8;
  • &#x23f9;
  • &#x23fa;

注意:显然,流行字体对这些字符的支持不是很好,因此,如果您打算在网络上使用它,请确保选择支持这些字符的网络字体。



22

我找到了它,它在其他技术块中。⏸(U + 23F8)


3
不确定正确答案是如何被否决的。请参见下面的链接,该“双竖线”在其注释中也被标记为“暂停”。太糟糕了,字体似乎并没有得到很好的支持(2014年6月添加到Unicode中)。 fileformat.info/info/unicode/char/23f8/index.htm
ANM


5

如果您希望一个字符与右边的三角形匹配以进行“播放”,请尝试使用罗马数字2。Ⅱ是&#8545;HTML。如果您可以在其周围放置格式标签,则粗体字看起来确实不错。<b>&#8545;</b>HTML。与前面提到的双竖线相比,它具有更好的支持。


很高兴您提到将其设为大胆。我正在使用&#2405; 而且粗体看起来更好。
释放


2

尽管根据字体的不同,各种字符或字符组合看起来或多或少都像暂停符号,但没有编码用作暂停符号的字符。

在2005年公开Unicode邮件列表的讨论中,建议使用U + 275A HEAVY VERTICAL BAR字符的两个副本:❚❚。但是结果的适当性取决于字体。例如,字形可能设计得使条形之间的距离太大。–列表讨论说明了为什么未对暂停符号进行编码,并且此符号未更改。

因此,最好的选择是使用图像。如果需要在文本中使用该符号,则最好以适当的大尺寸(例如60 x 60像素)创建该符号,然后使用CSS(例如,height: 0.8emimg元素上进行设置)将其缩小到文本尺寸。


您还可以在双沉重竖杠中添加一些CSS,例如“ letter-spacing:-6px”,因此它看起来更像是一个真正的暂停符号。示例:jsfiddle.net/enKaA
JaGo 2014年

由于高度相同,因此比#9616更好。
Aram Kocharyan 2014年

2
这个答案已经过时了。Unicode 7.0(2014年发行)为此添加了U + 23F8和匹配的符号(播放,停止,记录)unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.