HTML für das Pausensymbol in der Audio- und Videosteuerung

97

Ich versuche, das Unicode-Symbol zu finden, damit auf einer Schaltfläche das Unicode-Pausensymbol angezeigt wird. Ich konnte feststellen, dass das Unicode-Wiedergabesymbol ist &#9658, suche aber nach dem Äquivalent des Unicode-Pausensymbols.

html unicode special-characters symbols user3081307
quelle
1
Hatte die gleiche Frage, aber für einen "Stop" -Button (Quadrat). Rokos Antwort war die beste dafür.
Starmandeluxe

Antworten:

105

Es gibt verschiedene Symbole, die als angemessener Ersatz angesehen werden können, darunter:

  1. | | - zwei standardmäßige (fettgedruckte) vertikale Balken.

  2. ▋▋ - ▋und noch einer▋

  3. ▌▌ - ▌und noch einer▌

  4. ▍▍ - ▍und noch einer▍

  5. ▎▎ - ▎und noch einer▎

  6. ❚❚ - ❚und noch einer❚

Ich habe vielleicht ein oder zwei verpasst, aber ich denke, das sind die besseren. Hier ist eine Liste von Symbolen für alle Fälle.

dsgriffin
quelle
Ich habe folgendes benutzt: 𝍪.
JoshuaD
& # 9646; ist das eigentliche Pausensymbol in HTML.
Fla
@JoshuaD Wenn Sie mehrere Browser unterstützen möchten, sollten Sie diesen wahrscheinlich nicht verwenden. Ich verwende den neuesten Firefox und er ist nicht lesbar.
Ein Kind Gottes
3
Ich habe =mit verwendet transform:rotate(90deg);.
Joe DF
1
@AChildofGod - Es geht nicht (nur) um den Browser, sondern um die auf Ihrem Computer installierten Schriftarten.
Kubi
173

Unicode-Standard für Mediensteuerungssymbole

Pause: ⏸︎

Der Unicode- Standard 13.0 (Update 2020) enthält die verschiedenen technischen Glyphen im HEX-Bereich 2300–23FF

Sonstiges Technisch

In Anbetracht der umfangreichen Unicode 13.0-Dokumentation lauten einige der Glyphen, die wir allgemeinen Mediensteuerungssymbolen zuordnen können, wie folgt:

Tastatur- und UI-Symbole

23CF ⏏︎ Medien auswerfen

Symbole der Benutzeroberfläche

23E9 ⏩︎ schneller Vorlauf
23EA ⏪︎ Rücklauf, schneller
Rücklauf 23EB ⏫︎ schneller Anstieg
23EC ⏬︎ schneller Rückgang
23ED ⏭︎ bis zum Ende
springen , nächster 23EE ⏮︎ zum Start
springen , vorheriger 23EF ⏯︎ Wiedergabe / Pause
umschalten 23F1 ⏱︎ Stoppuhr
23F2 ⏲︎
Timeruhr 23F3 ⏳︎ Sanduhr
23F4 ⏴ ︎ Rückwärts, Zurück
23F5 ⏵︎ Vorwärts, Weiter, Wiedergabe
23F6 ⏶︎ Erhöhen
23F7 ⏷︎ Verringern
23F8 ⏸︎ Pause
23F9 ⏹︎ Stoppen
23FA ⏺︎ Aufnahme

Leistungssymbole aus ISO 7000: 2012

23FB ⏻︎ Standby / Stromversorgung
23FC ⏼︎ Ein- / Ausschalten
23FD ⏽︎ Einschalten
2B58 ⭘︎ Ausschalten

Leistungssymbol von IEEE 1621-2004

23FE ⏾︎ Power Sleep

Verwendung im Web:

Eine Datei muss mithilfe der UTF-8-Codierung ohne Stückliste (die in den meisten Entwicklungsumgebungen standardmäßig festgelegt ist) gespeichert werden, um den Parser anzuweisen, wie die Bytes korrekt in Zeichen umgewandelt werden. <meta charset="utf-8"/>sollte unmittelbar danach <head>in einer HTML-Datei verwendet werden , und stellen Sie sicher, dass die richtigen HTTP-HeaderContent-Type: text/html; charset=utf-8 sind.

Beispiele:

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"

Standardisierte Variante

Um zu verhindern, dass eine Glyphe "farbemojifiziert" wird ⏩︎ / ⏩, fügen Sie den Code U + FE0E Text Presentation Selector hinzu , um eine standardisierte Variante anzufordern : (Beispiel:&#x23e9;&#xfe0e; )

Inkonsistenzen

Zeichen im Unicode-Bereich sind anfällig für die verwendete Schriftfamilienumgebung, Anwendung, Browser, Betriebssystem und Plattform.
Wenn dies unbekannt ist oder fehlt , werden möglicherweise stattdessen Symbole wie oder ▯ oder sogar inkonsistentes Verhalten aufgrund von Unterschieden bei der Implementierung von HTML-Parser durch verschiedene Anbieter angezeigt .
In Windows Chromium-Browsern ist beispielsweise das Suffix U + FE0E für standardisierte Varianten fehlerhaft, und solche Symbole werden immer noch besser von CSS begleitet, dh: font-family: "Segoe UI Symbol"diese bestimmte Schriftart über das farbige Emoji zu erzwingen (normalerweise als "Segoe UI Emoji" erkannt) - was trotzt Der Zweck von U + FE0E in erster Linie - die Zeit wird es zeigen ...

Skalierbare Symbolschriftarten

Zur Umgehung Problemen im Zusammenhang nicht unterstützte Zeichen - eine tragfähige Lösung verwenden skalierbare Symbol font-Sets .:

Font Awesome

Player-Symbole - skalierbar - Schriftart fantastisch

<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>
Erweitern Sie das Snippet

Google Icons

Geben Sie hier die Bildbeschreibung ein

<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>
Erweitern Sie das Snippet

und viele andere, die Sie in freier Wildbahn finden können; und zu guter Letzt dieses wirklich nützliche Online-Tool: Font-Icons Generator, Icomoon.io .

Roko C. Buljan
quelle
2
Danke Kumpel, wirklich hilfreiche Antwort.
Daniel Barde
1
Ärgerlicherweise gibt es in den Google-Schriftarten / -Symbolen keine Schaltfläche "Eingekreistes Anhalten", daher sind die Einstellungen für "Eingekreistes Spiel" und "Eingekreiste Pause" unvollständig ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan
Fantastische Antwort - Ich liebe die Mühe, die in sie gesteckt wurde. Haben Sie das offizielle "ISO 7000 / IEC 60417-Symbol für Pause; Unterbrechung ist # 5111B. Siehe Media_Controls" bemerkt, auf das @intotecho in dieser unterschätzten Antwort hingewiesen hat? → stackoverflow.com/a/48918561/4575793
Cadoiz
57

Folgendes kann nützlich sein:

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

HINWEIS : Anscheinend werden diese Zeichen in gängigen Schriftarten nicht sehr gut unterstützt. Wenn Sie sie also im Web verwenden möchten, wählen Sie unbedingt eine Webschrift aus, die diese unterstützt.

rr-
quelle
22

Ich habe es gefunden, es befindet sich im Block "Sonstiges". ⏸ (U + 23F8)

birtannic124
quelle
3
Ich bin mir nicht sicher, wie die richtige Antwort abgelehnt wurde. Siehe Link unten, wo dieser "doppelte vertikale Balken" in seinen Kommentaren auch als "Pause" vermerkt ist. Schade, dass es in den Schriftarten nicht gut unterstützt wird (im Juni 2014 zu Unicode hinzugefügt). fileformat.info/info/unicode/char/23f8/index.htm
Anm
12

Ich benutze ▐ ▌

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

CSS: \2590\A0\258C

Nathan geht
quelle
5

Wenn Sie möchten, dass ein einzelnes Zeichen mit dem nach rechts gerichteten Dreieck für "Spielen" übereinstimmt, versuchen Sie es mit der römischen Ziffer 2. Ⅱ ist &#8545;in HTML. Wenn Sie Formatierungs-Tags darum setzen können, sieht es in Fettdruck wirklich gut aus. Ⅱ ist <b>&#8545;</b>in HTML. Dies hat eine viel bessere Unterstützung als die zuvor erwähnte doppelte vertikale Stange.

StarCrashr
quelle
Ich bin froh, dass du erwähnt hast, dass du es mutig machst. Ich verwende & # 2405; und fett sieht es besser aus.
Efreed
5

Moderne Browser unterstützen auch 'DOUBLE VERTICAL BAR' (U + 23F8):

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

Für einen Musik-Player kann er als Begleiter für 'BLACK RIGHT-POINTING POINTER' (U + 25BA) fungieren, da beide die gleiche Breite und Höhe haben, was ihn perfekt für eine Wiedergabe- / Pause-Taste macht:

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

Midzer
quelle
1
Auf einem Mac ist die doppelte vertikale Leiste von einem skeuomorphen Kästchen umgeben, das sich vom schwarzen nach rechts zeigenden Zeiger unterscheidet.
Will
2

Es gibt kein Zeichen, das für die Verwendung als Pausensymbol codiert ist, obwohl verschiedene Zeichen oder Zeichenkombinationen je nach Schriftart mehr oder weniger wie ein Pausensymbol aussehen können.

In einer Diskussion in der öffentlichen Unicode-Mailingliste im Jahr 2005 ein Vorschlag ❚❚: Es wurde zu verwenden , um zwei Kopien des U + 275A HEAVY VERTICAL BAR Charakters gemacht. Die Angemessenheit des Ergebnisses hängt jedoch von der Schriftart ab. Beispielsweise könnte die Glyphe so gestaltet worden sein, dass die Balken zu weit voneinander entfernt sind. - In der Listendiskussion wird erläutert, warum ein Pausensymbol nicht codiert wurde und dies nicht geändert wurde.

Daher ist die beste Option, ein Bild zu verwenden. Wenn Sie das Symbol im Text verwenden müssen, erstellen Sie es am besten in einer entsprechend großen Größe (z. B. 60 x 60 Pixel) und verkleinern Sie es mit CSS auf die Textgröße (z. B. Einstellung height: 0.8emdes imgElements).

Jukka K. Korpela
quelle
Sie können der doppelten schweren vertikalen Leiste auch CSS wie "Buchstabenabstand: -6px" hinzufügen, damit sie eher wie ein echtes Pausensymbol aussieht. Beispiel: jsfiddle.net/enKaA
JaGo
Dies ist besser als # 9616, da es die gleiche Höhe hat.
Aram Kocharyan
2
Diese Antwort ist veraltet. Unicode 7.0 (2014 veröffentlicht) hinzugefügt U + 23F8 und gleiche Symbole (Play, Stop, Aufnahme) genau zu diesem Zweck unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz
2

Das ISO 7000 / IEC 60417-Symbol für Pause; Die Unterbrechung ist # 5111B. Siehe Media_Controls

intecho
quelle