it-swarm.com.de

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

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

88
user3081307

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

  1. | | - zwei normale (fettgedruckte) vertikale Balken.

  2. ▋▋ - ▋ und ein anderer▋

  3. ▌▌ - ▌ und ein anderer▌

  4. ▍▍ - ▍ und ein anderer▍

  5. ▎▎ - ▎ und ein anderer▎

  6. ❚❚ - ❚ und ein anderer ❚

Ich habe vielleicht ein oder zwei verpasst, aber ich denke, das sind die besseren. Hier ist eine Liste von Symbolen nur für den Fall.

89
lifetimes

Um zu vermeiden, dass Sie mit nicht unterstützten Zeichen herumspielen, können Sie eine skalierbare Symbolschrift verwenden, die wie folgt lautet:

Font Awesome

Player icons - scalable - font awesome

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

GoogleIcons

enter image description here

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

oder jede andere Schriftart, die Sie finden können in the wild.

Player-Symbole mit UTF-8-Zeichen

jsBin-Demo mit erweiterten Beispielen

Nach umfangreichen Recherchen habe ich die besten ausgewählt, die diese Anforderungen erfüllen:

  • Kann mit mindestens 2 anderen Zeichensymbolen gruppiert werden
  • Ordentlich (zentriert) in die vordefinierte Linienhöhe einpassen; (wie wenn in <button> Element)
  • Erfordern weniger Anpassungen in CSS (wie z. B. Buchstabenabstand für Pause usw.)

[~ # ~] nb [~ # ~] : StackOverflow's font-family ist für diese Vorschau möglicherweise nicht geeignet. Probieren Sie den Code auf Ihrer Seite aus oder ordnen Sie die Symbole so an, dass sie am besten passen.
Beachten Sie auch, dass Firefox einen internen Glyphensatz hat, auf den zurückgegriffen wird, während Chrome zeigt ein leeres Kästchen für die fehlenden. Stellen Sie sicher, dass Sie auf allen Geräten und in allen Browsern das gleiche Ergebnis erzielen .


◼ ◼ ❚❚ ► ⚫ ⚫ ⏪

&#9724; &#10073;&#10073; &#10074;&#10074; &#9658; &#9899; &#9194; &#9193;

◾ ▮▮ ▶ ●

&#9726; &#9646;&#9646; &#9654; &#9679;

◽ ◽ ▷ ⚬ ⚬

&#9725; &#9647;&#9647; &#9655; &#9900; &#8728; 

◻ ◻ ❘ ▷ ▷

&#9723; &#10072; &#10072; &#9655; &#9711;

▪ ▸ • ▫ ▹ ◦

&#9642; &#9656; &#8226; &#9643; &#9657; &#9702;

(Um die Leerstelle auf dem Symbol Pause einzugrenzen, verwenden Sie CSS: letter-spacing:-1px;)

Extras:

‣ ‣ ■ □ ∎ ☐ ⟲ ⟲ ⟳
⏏ ⏏ ☰ ⁍ ⁍ ⧏ ⧐ ⚫ ⚫

&#8227; &#9015;&#9015; &#9632; &#9633; &#8718; &#8414; &#9744; &#10226; &#10227; &#10560;
&#9167; &#9776; &#8268; &#8269; &#10703; &#10704; &#9288; &#8734; &#9899; &#9900;

⋜ ⋜ ◽ ⊲ ⊲ ∘
⌳ ⌳ ⋈ ⊶ ⎋ ⚭
⊖⊕⊙
↻↺
≡ ⋮
≛≣
★★★★ ☆

&#8924; &#9725; &#2405; &#8882; &#8728; &#8925; //Prv, St, Pau, Ply, Rec, Nxt    
&#9011; &#8904; &#8767; &#8886; &#9099; &#9901; //Fad, X-Fad, Fx, Eq, Pan, Stereo
&#8854;&#8853;&#8857; //Vol-, Vol+, Mute  
&#8635;&#8634; //Repeat    
&#8801;&#8942; //Menu, Options  
&#8795;&#8803; //Favorited, Add to Fav. (Tracks list)  
&#9733;&#9733;&#9733;&#9733;&#9734; // Rating


Wie Sie feststellen können , entsprach keine der anderen vorgeschlagenen Antworten meinen Anforderungen, und hier ist ein Beispiel, warum:

<h2>Problematic</h2>
<button>||</button> || Two pipes :( bye fellas...
<br><br>
<button>&#9616;&#9616;</button> &amp;#9616;#9616; Too tall and messed spacing!
<br><br>
<button>&#9611;&#9611;</button> &amp;#9611;#9611; Too large and messed spacing!
<br><br>
<button>&#9616;&nbsp;&#9612;</button> &amp;#9616;&amp;#9616; Lovable but... Tall and cannot fit-size with any other player symbol
<br><br>
<button>&#9612;&#9612;</button> &amp;#9612;&amp;#9612; Way too tall and messed spacing!
<br><br>
<button>&#9623; &#9622;</button> &amp;#9623;&amp;#9622; Wrong alignment + extra spacing
<br><br>
<button>&#11044;</button> &amp;#11044; Height...
<br><br>

P.S: UTF-8 Unicode Characters Generator von: https://stackoverflow.com/a/25986009

153
Roko C. Buljan

Folgendes kann nützlich sein:

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

NOTE : Anscheinend werden diese Zeichen in gängigen Schriftarten nicht sehr gut unterstützt. Wenn Sie sie also im Web verwenden möchten, sollten Sie unbedingt einen Webfont auswählen das unterstützt diese.

49
rr-

▐▐ ist HTML und wird mit folgendem Code erstellt: &#9616;&#9616;.

Hier ist ein Beispiel für JSFiddle.

27
marcusmichaels

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

20
birtannic124

Ich benutze ▐ ▐

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

CSS: \2590\A0\258C

9
Nathan Goings

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

6
StarCrashr

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

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

Für einen Musikplayer 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-/Pausentaste macht:

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

4
midzer

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

1
intotecho

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

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

Daher ist die beste Option, ein Bild zu verwenden. Wenn Sie das Symbol in Text verwenden müssen, erstellen Sie es am besten in einer angemessen großen Größe (z. B. 60 x 60 Pixel) und skalieren Sie es mit CSS auf die Textgröße herunter (z. B. Festlegen von height: 0.8em für das Element img).

1