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
⏩ Pictograph
⏩︎ 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: ⏩︎)
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:
<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>
<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 online realmente útil: generador de iconos de fuentes, Icomoon.io .