Solución:
Estándar Unicode para símbolos de control de medios
Pausa: ⏸︎
El estándar Unicode 13.0 (actualización 2020) proporciona el Técnica miscelánea glifos en el rango HEX 23.00-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 ⏪︎ rebobinar, retroceder rápido
23EB ⏫︎ aumento rápido
23EC ⏬︎ disminución rápida
23ED ⏭︎ saltar hasta el final, siguiente
23EE ⏮︎ saltar al inicio, anterior
23EF ⏯︎ alternar reproducción / pausa
23F1 ⏱︎ cronómetro
23F2 ⏲︎ reloj temporizador
23F3 ⏳︎ reloj de arena
23F4 ⏴︎ marcha atrás, atrás
23F5 ⏵︎ adelante, siguiente, jugar
23F6 ⏶︎ aumento
23F7 ⏷︎ disminución
23F8 ⏸︎ pausa
23F9 ⏹︎ detener
23FA ⏺︎ registroSímbolos de energía de ISO 7000: 2012
23FB ⏻︎ espera / encendido
23FC ⏼︎ encendido / apagado
23FD ⏽︎ encendido
2B58 ⭘︎ apagadoSí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 indicar al analizador cómo transformar los bytes en caracteres correctamente. <meta charset="utf-8"/> debe usarse inmediatamente después <head> en un archivo HTML y asegúrese de que los encabezados HTTP correctos Content-Type: text/html; charset=utf-8 se establecen.
Ejemplos:
HTML
⏩ Pictograph
⏩︎ Standardized Variant
CSS
.icon-ff:before { content: "23E9" }
.icon-ff--standard:before { content: "23E9FE0E" }
JavaScript
EL_iconFF.textContent = "u23E9";
EL_iconFF_standard.textContent = "u23E9uFE0E"
Variante estandarizada
Para evitar que un glifo sea “color-emojificado” ⏩︎ / ⏩ adjuntar el código U + FE0E Selector de presentación de texto para solicitar un Variante estandarizada: (ejemplo: ⏩︎)
Inconsistencias
Los caracteres de la gama Unicode son susceptibles al entorno de familia de fuentes en el que se utilizan, la aplicación, el navegador, el sistema operativo y la plataforma.
Cuando desconocido o desaparecido – podríamos ver símbolos como o ▯ en su lugar, o incluso comportamiento inconsistente debido a las diferencias en las implementaciones del analizador HTML de diferentes proveedores.
Por ejemplo, en Ventanas En los navegadores Chromium, el sufijo de la variante estandarizada U + FE0E tiene errores, y estos 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”), 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 es decir:
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>Iconos de 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>y muchos otros que puedes encontrar en la naturaleza; y por último, pero no menos importante, esta herramienta en línea realmente útil: generador de iconos de fuentes, Icomoon.io.
Hay varios símbolos que podrían considerarse reemplazos adecuados, que incluyen:
-
| | – dos barras verticales estándar (en negrita).
-
▋▋ –
▋y otro▋ -
▌▌ –
▌y otro▌ -
▍▍ –
▍y otro▍ -
▎▎ –
▎y otro▎ -
❚❚ –
❚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.
Lo siguiente puede resultar útil:
- ⏩
⏩ - ⏪
⏪ - ⏫
⓫ - ⏬
⏬ - ⏭
⏭ - ⏮
⏮ - ⏯
⏯ - ⏴
⏴ - ⏵
⏵ - ⏶
⏶ - ⏷
⏷ - ⏸
⏸ - ⏹
⏹ - ⏺
⏺
NOTA: aparentemente, estos caracteres no son muy compatibles con las fuentes populares, por lo que si planea usarlo en la web, asegúrese de elegir una fuente web que los admita.