Padrão Unicode para símbolos de controle de mídia
Pausa: ⏸︎
O Unicode Standard 13.0 (atualização 2020) fornece os diversos glifos técnicos no intervalo HEX 2300–23FF
Técnico Diverso
Dada a extensa documentação do Unicode 13.0 , alguns dos glifos que podemos associar aos símbolos de controle de mídia comuns seriam os seguintes:
Símbolos de teclado e interface do usuário
23CF ⏏︎ Ejetar mídia
Símbolos da interface do usuário
23E9 ⏩︎ avanço rápido
23EA ⏪︎ retrocesso rápido
23EB ⏫︎ aumento
rápido
23EC ⏬︎ diminuição rápida 23ED ⏭︎ pular para o fim, próximo
23EE ⏮︎ pular para iniciar, anterior
23EF ⏯︎ reproduzir / pausar alternar
23F1 ⏱︎ cronômetro
23F2 ⏲︎ cronômetro
23F3 ⏳︎ ampulheta
23F4 ⏴ ︎ reverter, voltar
23F5 ⏵︎ avançar, próximo, reproduzir
23F6 ⏶︎ aumentar
23F7 ⏷︎ diminuir
23F8 ⏸︎ pausar
23F9 ⏹︎ parar
23FA ⏺︎ registro
Símbolos de poder da ISO 7000: 2012
23FB ⏻︎ standby / power
23FC ⏼︎ power on / off
23FD ⏽︎ power on
2B58 ⭘︎ power off
Símbolo de potência de IEEE 1621-2004
23FE ⏾︎ power sleep
Use na Web:
Um arquivo deve ser salvo usando a codificação UTF-8 sem BOM (que na maioria dos ambientes de desenvolvimento é definido por padrão) para instruir o analisador como transformar os bytes em caracteres corretamente. <meta charset="utf-8"/>deve ser usado imediatamente após <head>em um arquivo HTML e certifique-se de que os cabeçalhos HTTP corretos Content-Type: text/html; charset=utf-8estejam configurados.
Exemplos:
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 padronizada
Para evitar um glifo de ser "cor-emojified" ⏩︎ / ⏩ anexar o código U + FE0E texto de apresentação Selector para solicitar uma variante Padronizado : (exemplo: ⏩︎)
Inconsistências
Os caracteres na faixa Unicode são suscetíveis ao ambiente da família de fontes em que são usados, aplicativo, navegador, sistema operacional, plataforma.
Quando desconhecido ou ausente - podemos ver símbolos como ou ▯, ou até mesmo comportamento inconsistente devido a diferenças nas implementações do analisador HTML por diferentes fornecedores.
Por exemplo, em navegadores Windows Chromium, o sufixo da Variante Padronizada U + FE0E apresenta erros, e esses símbolos são acompanhados melhor por CSS, ou seja: font-family: "Segoe UI Symbol"para forçar essa fonte específica sobre o Emoji colorido (geralmente reconhecido como "Segoe UI Emoji") - o que desafia o propósito de U + FE0E em primeiro lugar - o tempo dirá ...
Fontes de ícones escaláveis
Para contornar problemas relacionados a caracteres não suportados - uma solução viável é usar conjuntos de fontes de ícones escalonáveis, como por exemplo:
<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>
e muitos outros que você pode encontrar na natureza; e por último, mas não menos importante, esta ferramenta online realmente útil: gerador de ícones de fontes, Icomoon.io .