HTML para o símbolo de pausa no controle de áudio e vídeo

97

Estou tentando encontrar o símbolo Unicode para fazer um botão exibir o símbolo de pausa Unicode. Consegui descobrir que o símbolo de reprodução Unicode é, &#9658mas estou procurando o equivalente ao símbolo de pausa Unicode.

html unicode special-characters symbols user3081307
fonte
1
Tive a mesma pergunta, mas para um botão "Parar" (quadrado). A resposta de Roko foi a melhor para isso.
starmandeluxe

Respostas:

105

Existem vários símbolos que podem ser considerados substitutos adequados, incluindo:

  1. | | - duas barras verticais padrão (em negrito).

  2. ▋▋ - ▋e outro▋

  3. ▌▌ - ▌e outro▌

  4. ▍▍ - ▍e outro▍

  5. ▎▎ - ▎e outro▎

  6. ❚❚ - ❚e outro❚

Posso ter perdido um ou dois, mas acho que esses são os melhores. Aqui está uma lista de símbolos para o caso.

dsgriffin
fonte
Eu usei isto: 𝍪.
JoshuaD
& # 9646; é o verdadeiro símbolo de pausa em HTML.
Flórida
@JoshuaD se você deseja oferecer suporte a vários navegadores, provavelmente não deveria usar aquele. Estou usando o Firefox mais recente e ele não pode ser lido.
Um Filho de Deus,
3
Eu usei =com transform:rotate(90deg);.
Joe DF
1
@AChildofGod - não é (apenas) sobre o navegador, depende das fontes instaladas em sua máquina.
kubi de
173

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 
&#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 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: &#x23e9;&#xfe0e;)

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:

Fonte incrível

Ícones do jogador - escalável - fonte incrível

<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 trecho

Ícones do Google

insira a descrição da imagem aqui

<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 trecho

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 .

Roko C. Buljan
fonte
2
Obrigado amigo, uma resposta realmente útil.
Daniel Barde
1
Irritantemente, não há um botão de "parada circulada" na fonte / ícones do Google, então o conjunto "reprodução circulada" e "pausa circulada" está incompleto ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan
Resposta incrível - adoro o esforço que foi feito. Você notou o oficial "ISO 7000 / IEC 60417 Símbolo de pausa; a interrupção é # 5111B. Consulte Media_Controls", que foi apontado por @intotecho nesta resposta subestimada? → stackoverflow.com/a/48918561/4575793
Cadoiz
57

O que se segue pode ser útil:

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

NOTA : aparentemente, esses caracteres não são muito bem suportados em fontes populares, então se você planeja usá-los na web, certifique-se de escolher uma webfont que os suporte.

rr-
fonte
22

Eu encontrei, está no bloco Miscellaneous Technical. ⏸ (U + 23F8)

birtannic124
fonte
3
Não tenho certeza de como a resposta certa foi rejeitada. Veja o link abaixo onde esta "barra vertical dupla" também é indicada como "pausa" em seus comentários. Uma pena que não parece ser bem suportado nas fontes (adicionado ao Unicode em junho de 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm
12

Estou usando ▐ ▌

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

CSS: \2590\A0\258C

Nathan Goings
fonte
5

Se você deseja que um único caractere corresponda ao triângulo da face direita para "jogar", tente o numeral romano 2. Ⅱ está &#8545;em HTML. Se você puder colocar tags de formatação ao redor dele, fica muito bom em negrito. Ⅱ está <b>&#8545;</b>em HTML. Este tem um suporte muito melhor do que a barra vertical dupla mencionada anteriormente.

StarCrashr
fonte
Estou feliz que você mencionou torná-lo ousado. Estou usando & # 2405; e fica melhor em negrito.
efreed
5

Os navegadores modernos também suportam 'BARRA VERTICAL DUPLA' (U + 23F8):

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

Para um reprodutor de música, ele pode atuar como um companheiro para o 'PONTEIRO DE APONTAMENTO DIREITO PRETO' (U + 25BA) porque ambos compartilham a mesma largura e altura, tornando-o perfeito para um botão de reprodução / pausa:

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

Midzer
fonte
1
No mac, a barra vertical dupla é cercada por uma caixa esquemórfica e parece diferente do ponteiro preto apontando para a direita.
Será
2

Não há nenhum caractere codificado para uso como símbolo de pausa, embora vários caracteres ou combinações de caracteres possam se parecer mais ou menos com um símbolo de pausa, dependendo da fonte.

Em uma discussão na lista de discussão pública Unicode em 2005, foi sugerido o uso de duas cópias do caractere U + 275A HEAVY VERTICAL BAR: ❚❚. Mas a adequação do resultado depende da fonte; por exemplo, o glifo pode ter sido projetado para que as barras fiquem muito separadas. - A discussão da lista explica por que um símbolo de pausa não foi codificado e isso não mudou.

Assim, a melhor opção é usar uma imagem. Se você precisa usar o símbolo no texto, é melhor criá-lo em um tamanho adequadamente grande (digamos 60 por 60 pixels) e redimensioná-lo para o tamanho do texto com CSS (por exemplo, configuração height: 0.8emno imgelemento).

Jukka K. Korpela
fonte
Você também pode adicionar alguns CSS como "espaçamento entre letras: -6px" à barra vertical pesada dupla, para que pareça mais com um símbolo de pausa real. Exemplo: jsfiddle.net/enKaA
JaGo
É melhor do que # 9616, pois tem a mesma altura.
Aram Kocharyan
2
Esta resposta está obsoleta. Unicode 7.0 (lançado em 2014) adicionou U + 23F8 e símbolos correspondentes (reproduzir, parar, gravar) precisamente para essa finalidade unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz
2

O símbolo ISO 7000 / IEC 60417 para pausa; A interrupção é # 5111B. Veja Media_Controls

intotecho
fonte