オーディオおよびビデオコントロールの一時停止シンボルのHTML
Unicodeシンボルを見つけて、ボタンにUnicode一時停止シンボルを表示させようとしています。 Unicodeプレイシンボルは►であることがわかりましたが、Unicodeポーズシンボルに相当するものを探しています。
適切な代替と考えられるさまざまな記号があります。
| |-2つの標準（太字）垂直バー。
▋▋-
▋およびanother▋▌▌-
▌およびanother▌▍▍-
▍およびanother▍▎▎-
▎およびanother▎❚❚-
❚および別の❚
私は1つか2つを逃したかもしれませんが、これらはより良いものだと思います。 これがシンボルのリストです 念のため。
サポートされていない文字をいじらないようにするには、次のようなスケーラブルアイコンフォントセットを使用できます。
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>または、他のフォントセットを野生で見つけることができます。
UTF-8文字を使用したプレーヤーアイコン
拡張サンプル付きのjsBinデモ
徹底的な調査の後私はこの要件を満たす最良のものを厳選しました：
- 少なくとも2つの他の文字記号とグループ化できます
- 事前に定義された行の高さに適切に（中央に）合わせます。 （
<button>要素内に配置されている場合） - CSSでの調整の必要量が少なくなります（一時停止などの文字間隔など）
NB：StackOverflowのfont-familyこのプレビューには適切でない可能性があります。ページ内のコードを試すか、最適なシンボルでシンボルを配置してください。
また、Firefoxにはフォールバックする内部グリフセットがあり、Chromeは、欠落しているものに対してempty boxを示します。 デバイスとブラウザ間で同じ結果が得られたことを確認してください。
◼❙❙❚❚►⚫⏪⏩
◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩
◾▮▮▶●
◾ ▮▮ ▶ ●
◽▯▯▷⚬∘
◽ ▯▯ ▷ ⚬ ∘
◻❘ ❘▷◯
◻ ❘ ❘ ▷ ◯
▪▸•▫◦◦
▪ ▸ • ▫ ▹ ◦
（somepauseアイコンのスペースを狭めるにはCSSを使用します：letter-spacing:-1px;）
追加：
‣⌷⌷■□∎☐⟲⟳⥀⥀
⏏☰⁌⁍⧏⧐∞∞⚫⚬
‣ ⌷⌷ ■ □ ∎ ⃞ ☐ ⟲ ⟳ ⥀
⏏ ☰ ⁌ ⁍ ⧏ ⧐ ⑈ ∞ ⚫ ⚬
⋜◽。 ⊲∘⋝
⌳⋈∿⊶⎋⚭⚭
⊖⊕⊙
↻↺
≡⋮
≛≣
★★★★☆
⋜ ◽ ॥ ⊲ ∘ ⋝ //Prv, St, Pau, Ply, Rec, Nxt
⌳ ⋈ ∿ ⊶ ⎋ ⚭ //Fad, X-Fad, Fx, Eq, Pan, Stereo
⊖⊕⊙ //Vol-, Vol+, Mute
↻↺ //Repeat
≡⋮ //Menu, Options
≛≣ //Favorited, Add to Fav. (Tracks list)
★★★★☆ // Rating
お気づきのとおり、他の提案された答えはどれも私の要件に適合していませんでした。その理由の例を次に示します。
<h2>Problematic</h2>
<button>||</button> || Two pipes :( bye fellas...
<br><br>
<button>▐▐</button> &#9616;#9616; Too tall and messed spacing!
<br><br>
<button>▋▋</button> &#9611;#9611; Too large and messed spacing!
<br><br>
<button>▐ ▌</button> &#9616;&#9616; Lovable but... Tall and cannot fit-size with any other player symbol
<br><br>
<button>▌▌</button> &#9612;&#9612; Way too tall and messed spacing!
<br><br>
<button>▗ ▖</button> &#9623;&#9622; Wrong alignment + extra spacing
<br><br>
<button>⬤</button> &#11044; Height...
<br><br>PS：UTF-8 Unicode Characters Generator from： https://stackoverflow.com/a/25986009
以下が役に立つかもしれません：
- ⏩
⏩ - ⏪
⏪ - ⏫
⓫ - ⏬
⏬ - ⏭
⏭ - ⏮
⏮ - ⏯
⏯ - ⏴
⏴ - ⏵
⏵ - ⏶
⏶ - ⏷
⏷ - ⏸
⏸ - ⏹
⏹ - ⏺
⏺
NOTE：明らかに、これらの文字は一般的なフォントではあまりサポートされていないため、Webで使用する予定がある場合は、これらをサポートするWebフォントを選択してください。
HTMLはHTMLで、▐▐というコードで作成されています。
私はそれを見つけました、それはその他の技術ブロックにあります。 ⏸（U + 23F8）
私はusingを使用しています
HTML：▐ ▌
CSS：\2590\A0\258C
「play」の右向きの三角形に一致する1文字の文字が必要な場合は、ローマ数字2を試してください。IIはHTMLのⅡです。周囲にフォーマットタグを配置できる場合、太字で表示されます。 Ⅱ HTMLでは<b>Ⅱ</b>です。これは、前述の二重垂直バーよりもはるかに優れたサポートを提供します。
最新のブラウザは、「DOUBLE VERTICAL BAR」（U + 23F8）もサポートしています。
http://www.fileformat.info/info/unicode/char/23f8/index.htm
音楽プレーヤーの場合、幅と高さが等しいため、再生/一時停止ボタンに最適なので、「BLACK RIGHT-POINTING POINTER」（U + 25BA）のコンパニオンとして機能できます。
ISO 7000/IEC 60417一時停止のシンボル。中断は＃5111Bです。 Media_Controls を参照してください
フォントによっては、一時停止記号として使用するためにエンコードされた文字はありませんが、さまざまな文字または文字の組み合わせは、一時停止記号のように見えます。
2005年のユニコード公開メーリングリストでの議論では、 提案 がU + 275A HEAVY VERTICAL BAR文字の2つのコピーを使用するために作成されました：❚❚。しかし、結果の妥当性はフォントに依存します。たとえば、グリフは、バーの間隔が広すぎるように設計されている場合があります。 –リストの説明では、一時停止記号がエンコードされなかった理由が説明されており、これは変更されていません。
したがって、最良のオプションは画像を使用することです。テキストでシンボルを使用する必要がある場合は、適切なサイズ（60 x 60ピクセルなど）で作成し、CSSでテキストサイズに縮小することをお勧めします（たとえば、img要素にheight: 0.8emを設定します）。