オーディオおよびビデオコントロールの一時停止記号のHTML


97

ボタンにUnicode一時停止記号を表示させるために、Unicode記号を見つけようとしています。Unicodeの再生シンボルが見つかり&#9658ましたが、Unicodeの一時停止シンボルに相当するものを探しています。


1
これと同じ質問がありましたが、「停止」ボタン(正方形)が必要でした。ロコの答えはこれに最適でした。
starmandeluxe

回答:


105

適切な置換と見なすことができるさまざまなシンボルがあり、次のものが含まれます。

  1. | | -2つの標準(太字)垂直バー。

  2. ▋▋- ▋その他▋

  3. ▌▌- ▌その他▌

  4. ▍▍- ▍その他▍

  5. ▎▎- ▎その他▎

  6. ❚❚- ❚その他❚

私は1つまたは2つを見落としたかもしれませんが、これらはより良いものだと思います。念のためシンボルのリストを以下に示します。


私はこれを使用しました:𝍪。
JoshuaD 2017年

▮ HTMLの実際の一時停止記号です。
Fla 2017年

@JoshuaD複数のブラウザーをサポートする場合は、おそらくそのブラウザーを使用しないでください。最新のFirefoxを使用していますが、読み込めません。
神の子

3
で使用=しましたtransform:rotate(90deg);
Joe DF

1
@AChildofGod-これはブラウザだけではなく、マシンにインストールされているフォントに依存します。
kubi

173

メディアコントロールシンボルのUnicode標準

一時停止: ⏸︎

ユニコード 規格13.0 (更新2020)提供するその他の技術 HEX範囲のグリフを2300-23FF

その他の技術

広範なUnicode 13.0のドキュメントがあるとすると、一般的なメディアコントロールシンボルに関連付けることができるグリフの一部は次のようになります。

キーボードとUIの記号

23CF mediaメディアの取り出し

ユーザーインターフェイスシンボル

23E9⏩︎
早送り23EA⏪︎巻き戻し、早戻し
23EB⏫︎高速増加
23EC⏬︎高速減少
23ED⏭︎スキップして終了、次の
23EE⏮︎スキップして開始、前の
23EF⏯︎再生/一時停止トグル
23F1⏱︎ストップウォッチ
23F2⏲︎タイマークロック
23F3⏳︎砂時計
23F4⏴ ︎戻る、戻る
23F5⏵︎進む、次に再生
23F6⏶︎増加
23F7⏷︎減少
23F8⏸︎一時停止
23F9⏹︎停止
23FA⏺︎録音

ISO 7000:2012の電源記号

23FB⏻︎スタンバイ/電源
23FC⏼︎電源オン/オフ
23FD⏽︎電源オン
2B58⭘︎電源オフ

IEEE 1621-2004の電源記号

23FE⏾︎パワースリープ

Webでの使用:

パーサーにバイトを文字に正しく変換する方法を指示するには、BOM(ほとんどの開発環境ではデフォルトで設定されています)なしのUTF-8エンコーディング 使用してファイルを保存する必要があります。 <meta charset="utf-8"/>直後に使用されるべき<head>HTMLファイル、および必ず正しいHTTPヘッダーが作るContent-Type: text/html; charset=utf-8設定されています。

例:

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"

標準化されたバリアント

ことからグリフを防止するために、「色emojified」 ⏩︎/⏩ アペンドコードU + FE0Eのテキストプレゼンテーションセレクタ要求する標準化変異体(例:&#x23e9;&#xfe0e;

矛盾

Unicode範囲の文字は、使用されているフォントファミリ環境、アプリケーション、ブラウザ、OS、プラットフォームの影響を受けます。不明または欠落している
場合、代わりに またはlikeなどの記号が表示されるか、異なるベンダーによるHTMLパーサーの実装の違いにより、動作一貫しない場合があります。 上の例では、Windowsのクロムはブラウザの標準化バリアント接尾辞U + FE0Eはバグがあり、このようなシンボルはまだ良いCSSすなわちを伴っている: (通常「のSegoe UI絵文字」として認識)カラー絵文字の上にその特定のフォントを強制するために-どの挑みますそもそもU + FE0Eの目的-時がたてば…
font-family: "Segoe UI Symbol"


スケーラブルアイコンフォント

サポートされいない文字に関連する問題を回避するには、次のようなスケーラブルなアイコンフォントセットを使用するのが現実的な解決策です。

素晴らしいフォント

プレーヤーのアイコン-スケーラブル-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>

Google アイコン

ここに画像の説明を入力してください

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

そしてあなたが野生で見つけることができる他の多く; 最後に重要なことですが、これは本当に便利なオンラインツールです:font-icons generator、Icomoon.io



2
メイト、本当に役立つ回答ありがとうございます。
Daniel Barde

1
不愉快なことに、Googleのフォント/アイコンには「円で囲まれた停止」ボタンがないため、「円で囲まれた再生」と「円で囲まれた一時停止」のセットは不完全です...
Fizz


素晴らしい答え-私はそれに注がれた努力が大好きです。この過小評価された回答で@intotechoが指摘した公式の「一時停止用のISO 7000 / IEC 60417シンボル。中断は#5111Bです。Media_Controlsを参照してください」に気づきましたか?→ stackoverflow.com
a/48918561/4575793

57

以下が役に立つかもしれません:

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

:明らかに、これらの文字は一般的なフォントではあまりサポートされていないため、Webで使用する場合は、これらをサポートするWebフォントを選択してください。



22

私はそれを見つけました、それは雑多なテクニカルブロックにあります。⏸(U + 23F8)


3
どのようにして正しい答えが反対票を投じられたのかわかりません。この「二重の縦棒」がコメントで「一時停止」として示されている以下のリンクを参照してください。残念ながら、フォントでは十分にサポートされていないようです(2014年6月にUnicodeに追加されました)。 fileformat.info/info/unicode/char/23f8/index.htm
Anm


5

単一の文字である "play"の右向きの三角形に一致させたい場合は&#8545;、ローマ数字2を試してください。ⅡはHTMLです。周りに書式タグを付けることができれば、太字で本当によく見えます。<b>&#8545;</b>HTMLです。これは、前述の二重垂直バーよりもはるかに優れたサポートがあります。


太字にしていただいてうれしいです。&#2405;を使用しています 太字の方がよく見えます。
efreed

5

最新のブラウザーは「DOUBLE VERTICAL BAR」(U + 23F8)もサポートしています。

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

音楽プレーヤーの場合、「BLACK RIGHT-POINTING POINTER」(U + 25BA)のコンパニオンとして機能できます。どちらも同じ幅と高さを共有しているため、再生/一時停止ボタンに最適です。

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


1
Macでは、二重の縦棒が歪められたボックスで囲まれ、黒い右向きポインターとは異なって見えます。
ウィル

2

フォントによっては、さまざまな文字または文字の組み合わせが一時停止記号のように見える場合がありますが、一時停止記号として使用するためにエンコードされた文字はありません。

2005年に公開されたUnicodeメーリングリストでの議論では、U + 275A HEAVY VERTICAL BAR文字の2つのコピーを使用するよう提案されました:❚❚。しかし、結果の妥当性はフォントに依存します。たとえば、バーが離れすぎているようにグリフが設計されている可能性があります。–リストの説明では、一時停止シンボルがエンコードされなかった理由が説明されており、これは変更されていません。

したがって、最良のオプションは画像を使用することです。テキスト内のシンボルを使用する必要がある場合、それは(60 60ピクセルを言う)適切な大きさのサイズでそれを作成し、CSSでテキストのサイズに縮小することが最良である(例えば、設定height: 0.8emimgの要素)。


また、「letter-spacing:-6px」などのCSSを二重の太い縦棒に追加して、実際の一時停止記号のように見せることもできます。例:jsfiddle.net/enKaA
JaGo

同じ高さなので#9616よりも優れています。
Aram Kocharyan 2014

2
この答えは時代遅れです。Unicode 7.0(2014年にリリース)は、この目的のためにU + 23F8と一致する記号(再生、停止、記録)を正確に追加しましたunicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.