HTML para el símbolo de pausa en el control de audio y video

97

Estoy tratando de encontrar el símbolo Unicode para que un botón muestre el símbolo de pausa Unicode. Pude encontrar que el símbolo de reproducción Unicode es, &#9658pero estoy buscando el equivalente del símbolo de pausa Unicode.

html unicode special-characters symbols usuario3081307
fuente
1
Tenía esta misma pregunta, pero para un botón "Parar" (cuadrado). La respuesta de Roko fue la mejor para esto.
starmandeluxe

Respuestas:

105

Hay varios símbolos que podrían considerarse reemplazos adecuados, que incluyen:

  1. | | - dos barras verticales estándar (en negrita).

  2. ▋▋ - ▋y otro▋

  3. ▌▌ - ▌y otro▌

  4. ▍▍ - ▍y otro▍

  5. ▎▎ - ▎y otro▎

  6. ❚❚ - ❚y otro❚

Puede que me haya perdido uno o dos, pero creo que estos son los mejores. Aquí hay una lista de símbolos por si acaso.

dsgriffin
fuente
Usé esto: 𝍪.
JoshuaD
& # 9646; es el símbolo de pausa real en HTML.
Fla
@JoshuaD si desea admitir varios navegadores, probablemente no debería usar ese. Estoy usando la última versión de Firefox y no se puede leer.
Un hijo de Dios
3
Usé =con transform:rotate(90deg);.
Joe DF
1
@AChildofGod: no se trata (solo) del navegador, depende de las fuentes instaladas en su máquina.
kubi
173

Estándar Unicode para símbolos de control de medios

Pausa: ⏸︎

El estándar Unicode 13.0 (actualización 2020) proporciona los glifos técnicos varios en el rango HEX 2300–23FF

Técnica miscelánea

Dada la extensa documentación de Unicode 13.0 , algunos de los glifos que podemos asociar a los símbolos de control de medios comunes serían los siguientes:

Símbolos de teclado e interfaz de usuario

23CF ⏏︎ Expulsar medios

Símbolos de la interfaz de usuario

23E9 ⏩︎ avance rápido
23EA ⏪︎ rebobinado, retroceso rápido
23EB ⏫︎ aumento rápido
23EC ⏬︎ disminución rápida
23ED ⏭︎ saltar al final, siguiente
23EE ⏮︎ saltar al inicio, anterior
23EF ⏯︎ alternar reproducción / pausa
23F1 ⏱︎ cronómetro
23F2 ⏲︎ reloj temporizador
23F3 ⏳︎ reloj de arena
23F4 ⏴ ︎ retroceder, retroceder
23F5 ⏵︎ avanzar, siguiente, reproducir
23F6 ⏶︎ aumentar
23F7 ⏷︎ disminuir
23F8 ⏸︎ pausar
23F9 ⏹︎ detener
23FA ⏺︎ grabar

Símbolos de energía de ISO 7000: 2012

23FB ⏻︎ espera / encendido
23FC ⏼︎ encendido / apagado
23FD ⏽︎ encendido
2B58 ⭘︎ apagado

Símbolo de energía de IEEE 1621-2004

23FE ⏾︎ suspensión de energía

Utilizar en la Web:

Un archivo debe guardarse utilizando la codificación UTF-8 sin BOM (que en la mayoría de los entornos de desarrollo se establece de forma predeterminada) para indicarle al analizador cómo transformar correctamente los bytes en caracteres. <meta charset="utf-8"/>debe usarse inmediatamente después <head>en un archivo HTML y asegúrese de que los encabezados HTTP correctosContent-Type: text/html; charset=utf-8 estén configurados los .

Ejemplos:

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"

Variante estandarizada

Para evitar un glifo de ser "color-emojified" ⏩︎ / ⏩ append el código U + FE0E texto de presentación Selector de solicitar una variante estandarizada : (ejemplo: &#x23e9;&#xfe0e;)

Inconsistencias

Los caracteres de la gama Unicode son susceptibles al entorno de familia de fuentes en el que se utilizan, aplicación, navegador, sistema operativo, plataforma.
Cuando es desconocido o falta , es posible que veamos símbolos como o ▯ en su lugar, o incluso un comportamiento inconsistente debido a las diferencias en las implementaciones del analizador HTML de diferentes proveedores.
Por ejemplo, en los navegadores Windows Chromium, el sufijo de la variante estandarizada U + FE0E tiene errores, y esos símbolos aún están mejor acompañados de CSS, es decir, font-family: "Segoe UI Symbol"para forzar esa fuente específica sobre el emoji de color (generalmente reconocido como "Segoe UI Emoji"), lo que desafía el propósito de U + FE0E en primer lugar - el tiempo lo dirá ...

Fuentes de iconos escalables

Para evitar problemas relacionados con caracteres no admitidos , una solución viable es utilizar conjuntos de fuentes de iconos escalables como, por ejemplo:

Fuente impresionante

Iconos de jugador - escalables - fuente impresionante

<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>
Expandir fragmento

Iconos de Google

ingrese la descripción de la imagen aquí

<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>
Expandir fragmento

y muchos otros que puedes encontrar en la naturaleza; y por último, pero no menos importante, esta herramienta online realmente útil: generador de iconos de fuentes, Icomoon.io .

Roko C. Buljan
fuente
2
Gracias amigo, respuesta realmente útil.
Daniel Barde
1
Es molesto que no haya un botón de "parada en un círculo" en la fuente / íconos de Google, por lo que su conjunto de "reproducción en círculo" y "pausa en un círculo" está incompleto ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan
Respuesta impresionante: me encanta el esfuerzo que se puso en ello. ¿Notó el símbolo oficial "ISO 7000 / IEC 60417 para pausa; la interrupción es # 5111B. Ver Media_Controls", que fue señalado por @intotecho en esta respuesta subestimada? → stackoverflow.com/a/48918561/4575793
Cadoiz
57

Lo siguiente puede resultar útil:

  • ⏩ &#x23e9;
  • ⏪ &#x23ea;
  • ⏫ &#x24eb;
  • ⏬ &#x23ec;
  • ⏭ &#x23ed;
  • ⏮ &#x23ee;
  • ⏯ &#x23ef;
  • ⏴ &#x23f4;
  • ⏵ &#x23f5;
  • ⏶ &#x23f6;
  • ⏷ &#x23f7;
  • ⏸ &#x23f8;
  • ⏹ &#x23f9;
  • ⏺ &#x23fa;

NOTA : aparentemente, estos caracteres no son muy compatibles con las fuentes populares, por lo que si planea usarlos en la web, asegúrese de elegir una fuente web que los admita.

rr-
fuente
22

Lo encontré, está en el bloque Técnico misceláneo. ⏸ (U + 23F8)

birtannic124
fuente
3
No estoy seguro de cómo se rechazó la respuesta correcta. Vea el enlace a continuación donde esta "barra vertical doble" también se indica como "pausa" en sus comentarios. Lástima que no parece estar bien soportado en las fuentes (agregado a Unicode en junio de 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm
12

Estoy usando ▐ ▌

HTML: &#9616;&nbsp;&#9612;

CSS: \2590\A0\258C

Nathan Goings
fuente
5

Si quieres que uno que tenga un solo carácter coincida con el triángulo que mira hacia la derecha para "jugar", prueba con el número romano 2. Ⅱ está &#8545;en HTML. Si puede colocar etiquetas de formato a su alrededor, se verá muy bien en negrita. Ⅱ está <b>&#8545;</b>en HTML. Esto tiene un soporte mucho mejor que la barra vertical doble mencionada anteriormente.

StarCrashr
fuente
Me alegra que hayas mencionado hacerlo en negrita. Estoy usando & # 2405; y se ve mejor en negrita.
efreed
5

Los navegadores modernos también admiten la 'BARRA VERTICAL DOBLE' (U + 23F8):

http://www.fileformat.info/info/unicode/char/23f8/index.htm

Para un reproductor de música, puede actuar como un compañero para el 'PUNTERO NEGRO QUE APUNTA A LA DERECHA' (U + 25BA) porque ambos comparten el mismo ancho y alto, lo que lo hace perfecto para un botón de reproducción / pausa:

http://www.fileformat.info/info/unicode/char/25ba/index.htm

midzer
fuente
1
En mac, la barra vertical doble está rodeada por un cuadro esqueomórfico que se ve diferente al puntero negro que apunta a la derecha.
Será el
2

No hay ningún carácter codificado para usar como símbolo de pausa, aunque varios caracteres o combinaciones de caracteres pueden parecerse más o menos a un símbolo de pausa, según la fuente.

En una discusión en la lista de distribución pública de Unicode en 2005, una sugerencia usar dos copias del carácter U + 275A HEAVY VERTICAL BAR: ❚❚. Pero la adecuación del resultado depende de la fuente; por ejemplo, el glifo podría haber sido diseñado de modo que las barras estén demasiado separadas. - La discusión de la lista explica por qué no se ha codificado un símbolo de pausa y esto no ha cambiado.

Por tanto, la mejor opción es utilizar una imagen. Si necesita usar el símbolo en el texto, es mejor crearlo en un tamaño suficientemente grande (digamos 60 por 60 píxeles) y reducirlo al tamaño del texto con CSS (por ejemplo, configurar height: 0.8emel imgelemento).

Jukka K. Korpela
fuente
También puede agregar algo de CSS como "espacio entre letras: -6px" a la barra vertical pesada doble, para que se vea más como un símbolo de pausa real. Ejemplo: jsfiddle.net/enKaA
JaGo
Esto es mejor que el # 9616 ya que tiene la misma altura.
Aram Kocharyan
2
Esta respuesta es obsoleta. Unicode 7.0 (lanzado en 2014) ha agregado U + 23F8 y símbolos coincidentes (reproducir, detener, grabar) precisamente para este propósito unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz
2

El símbolo ISO 7000 / IEC 60417 para pausa; La interrupción es # 5111B. Ver Media_Controls

intotecho
fuente