HTML per il simbolo Pausa nel controllo audio e video


97

Sto cercando di trovare il simbolo Unicode per fare in modo che un pulsante visualizzi il simbolo di pausa Unicode. Sono stato in grado di scoprire che il simbolo di riproduzione Unicode è &#9658ma sto cercando l'equivalente del simbolo di pausa Unicode.


1
Avevo la stessa domanda, ma per un pulsante "Stop" (quadrato). La risposta di Roko è stata la migliore per questo.
starmandeluxe

Risposte:


105

Esistono vari simboli che potrebbero essere considerati sostituti adeguati, tra cui:

  1. | | - due barre verticali standard (in grassetto).

  2. ▋▋ - ▋e un altro▋

  3. ▌▌ - ▌e un altro▌

  4. ▍▍ - ▍e un altro▍

  5. ▎▎ - ▎e un altro▎

  6. ❚❚ - ❚e un altro❚

Potrei aver perso uno o due, ma penso che questi siano i migliori. Ecco un elenco di simboli per ogni evenienza.


Ho usato questo: 𝍪.
JoshuaD

& # 9646; è il vero simbolo di pausa in HTML.
Fla

@JoshuaD se vuoi supportare più browser, probabilmente non dovresti usare quello. Sto usando l'ultima versione di Firefox e non è leggibile.
Un figlio di Dio

3
Ho usato =con transform:rotate(90deg);.
Joe DF,

1
@AChildofGod - non riguarda (solo) il browser, dipende dai caratteri installati sulla tua macchina.
kubi

173

Standard Unicode per simboli di controllo multimediale

Pausa: ⏸︎

Lo standard Unicode 13.0 (aggiornamento 2020) fornisce i glifi tecnici vari nell'intervallo HEX 2300–23FF

Tecniche varie

Data l'ampia documentazione Unicode 13.0 , alcuni dei glifi che possiamo associare ai simboli di controllo Media comuni sarebbero i seguenti:

Tastiera e simboli dell'interfaccia utente

23CF ⏏︎ Espelli il supporto

Simboli dell'interfaccia utente

23E9 ⏩︎ avanti veloce
23EA ⏪︎ riavvolgimento, riavvolgimento veloce
23EB ⏫︎ aumento rapido
23EC ⏬︎ diminuzione veloce
23ED ⏭︎ salta alla fine, successivo
23EE ⏮︎ salta all'inizio, precedente
23EF ⏯︎ riproduzione / pausa
alternata 23F1 ⏱︎ cronometro
23F2 ⏲︎ timer
23F3 ⏳︎ clessidra
23F4 ⏴ ︎ indietro, indietro
23F5 ⏵︎ avanti, avanti, riproduci
23F6 ⏶︎ aumenta
23F7 ⏷︎ diminuisci
23F8 ⏸︎ pausa
23F9 ⏹︎ ferma
23FA ⏺︎ registra

Simboli di potenza da ISO 7000: 2012

23FB ⏻︎ standby / alimentazione
23FC ⏼︎ accensione / spegnimento
23FD ⏽︎ accensione
2B58 ⭘︎ spegnimento

Simbolo di alimentazione da IEEE 1621-2004

23FE ⏾︎ power sleep

Utilizzo sul Web:

Un file deve essere salvato utilizzando la codifica UTF-8 senza BOM (che nella maggior parte degli ambienti di sviluppo è impostato per impostazione predefinita) per istruire il parser su come trasformare correttamente i byte in caratteri. <meta charset="utf-8"/>deve essere utilizzato immediatamente dopo <head>in un file HTML e assicurarsi che Content-Type: text/html; charset=utf-8siano impostate le intestazioni HTTP corrette .

Esempi:

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 standardizzata

Per impedire un glifo di essere "color-emojified" ⏩︎ / ⏩ accodamento codice U + FE0E Testo Presentazione Selettore richiesta di variante standardizzata : (esempio: &#x23e9;&#xfe0e;)

Incoerenze

I caratteri nella gamma Unicode sono sensibili all'ambiente della famiglia di caratteri che vengono utilizzati, applicazione, browser, sistema operativo, piattaforma.
Se sconosciuto o mancante , potremmo vedere invece simboli come o ▯, o persino un comportamento incoerente a causa delle differenze nelle implementazioni del parser HTML di diversi fornitori.
Ad esempio, sui browser Windows Chromium il suffisso Variant standardizzato U + FE0E è difettoso e tali simboli sono ancora meglio accompagnati da CSS, ad esempio: font-family: "Segoe UI Symbol"per forzare quel carattere specifico sull'Emoji colorato (di solito riconosciuto come "Segoe UI Emoji") - che sfida lo scopo di U + FE0E in primo luogo - il tempo lo dirà ...


Caratteri icona scalabili

Per aggirare i problemi relativi ai caratteri non supportati , una soluzione praticabile è utilizzare set di caratteri di icone scalabili come ad esempio:

Carattere fantastico

Icone del giocatore - scalabili - carattere fantastico

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

Icone di Google

inserisci qui la descrizione dell'immagine

<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 molti altri che puoi trovare in natura; e, ultimo ma non meno importante, questo strumento online davvero utile: generatore di icone di caratteri, Icomoon.io .



2
Grazie amico, risposta davvero utile.
Daniel Barde

1
Purtroppo non c'è alcun pulsante "stop cerchiato" nel carattere / icone di Google, quindi il set di "riproduzione cerchiato" e "pausa cerchiata" è incompleto ...
Fizz


Risposta fantastica - Adoro lo sforzo che ci è stato messo. Hai notato il "simbolo di pausa ISO 7000 / IEC 60417 ufficiale; l'interruzione è # 5111B. Vedi Media_Controls", che è stato indicato da @intotecho in questa risposta sottovalutata? → stackoverflow.com/a/48918561/4575793
Cadoiz

57

Di seguito può tornare utile:

  • &#x23e9;
  • &#x23ea;
  • &#x24eb;
  • &#x23ec;
  • &#x23ed;
  • &#x23ee;
  • &#x23ef;
  • &#x23f4;
  • &#x23f5;
  • &#x23f6;
  • &#x23f7;
  • &#x23f8;
  • &#x23f9;
  • &#x23fa;

NOTA : a quanto pare, questi caratteri non sono molto ben supportati nei caratteri popolari, quindi se prevedi di usarli sul web, assicurati di scegliere un carattere web che li supporti.



22

L'ho trovato, è nel blocco Tecnico Varie. ⏸ (U + 23F8)


3
Non sono sicuro di come sia stata sottovalutata la risposta giusta. Vedi il link sotto dove questa "doppia barra verticale" è anche indicata come "pausa" nei suoi commenti. Peccato che non sembra essere ben supportato nei caratteri (aggiunti a Unicode nel giugno 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm


5

Se vuoi che uno che sia un singolo carattere corrisponda al triangolo rivolto a destra per "gioca", prova il numero romano 2. Ⅱ è &#8545;in HTML. Se puoi inserire i tag di formattazione intorno ad esso, sembra davvero buono in grassetto. è <b>&#8545;</b>in HTML. Questo ha un supporto molto migliore rispetto alla doppia barra verticale menzionata in precedenza.


Sono contento che tu abbia accennato a renderlo audace. Sto usando & # 2405; e sembra migliore in grassetto.
efreed

5

I browser moderni supportano anche la 'DOPPIA BARRA VERTICALE' (U + 23F8):

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

Per un lettore musicale può fungere da compagno per 'PUNTATORE NERO PUNTO DESTRA' (U + 25BA) perché condividono entrambi la stessa larghezza e altezza, rendendolo perfetto per un pulsante di riproduzione / pausa:

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


1
Su mac la doppia barra verticale è circondata da un riquadro skeuomorfo dall'aspetto diverso dal puntatore nero rivolto a destra.
Will

2

Non ci sono caratteri codificati per l'uso come simboli di pausa, sebbene vari caratteri o combinazioni di caratteri possano sembrare più o meno come un simbolo di pausa, a seconda del carattere.

In una discussione nella mailing list pubblica Unicode nel 2005, è stato suggerito di utilizzare due copie del carattere U + 275A HEAVY VERTICAL BAR: ❚❚. Ma l'adeguatezza del risultato dipende dal carattere; ad esempio, il glifo potrebbe essere stato progettato in modo che le barre siano troppo separate. - La discussione dell'elenco spiega perché un simbolo di pausa non è stato codificato e questo non è cambiato.

Pertanto, l'opzione migliore è utilizzare un'immagine. Se è necessario utilizzare il simbolo nel testo, è meglio per creare in un opportunamente grandi dimensioni (ad esempio 60 per 60 pixel) e la scala verso il basso per la dimensione del testo con i CSS (per esempio, l'impostazione height: 0.8emsul imgelemento).


Puoi anche aggiungere CSS come "letter-spacing: -6px" alla doppia barra verticale pesante, in modo che assomigli più a un vero simbolo di pausa. Esempio: jsfiddle.net/enKaA
JaGo

È meglio di # 9616 poiché ha la stessa altezza.
Aram Kocharyan

2
Questa risposta è obsoleta. Unicode 7.0 (rilasciato nel 2014) ha aggiunto U + 23F8 e simboli corrispondenti (play, stop, record) proprio a questo scopo unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.