HTML для символа паузы в управлении аудио и видео

чтобы избежать возни с неподдерживаемыми символами, вы можете использовать масштабируемый набор шрифтов значков, например:

Шрифт Удивительным

<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 имеет внутренний набор символов, который будет отступать, в то время как хром показывает пустое поле для пропавших без вести. убедитесь, что вы получили тот же результат на разных устройствах и браузерах.}

---

◼ ❙❙ ❚❚ ► ⚫

◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩

◾ ▮▮ ▶ ●

◾ ▮▮ ▶ ●

◽ ▯▯ ▷ ⚬ ∘

◽ ▯▯ ▷ ⚬ ∘ 

◻ ❘ ❘ ▷ ◯

◻ ❘ ❘ ▷ ◯

▪ ▸ • ▫ ▹ ◦

▪ ▸ • ▫ ▹ ◦

_{(чтобы сузить пространство на несколько пауза icon use 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>&#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 генератор символов Юникода от: https://stackoverflow.com/a/25986009

следующее, может пригодится:

• ⏩
• ⏪
• ⓫
• ⏬
• ⏭
• ⏮
• ⏯
• ⏴
• ⏵
• ⏶
• ⏷
• ⏸
• ⏹
• ⏺

Примечание: по-видимому, эти символы не очень хорошо поддерживаются в популярных шрифтах, поэтому, если вы планируете использовать его в Интернете, не забудьте выбрать веб-Фонт, который поддерживает их.

▐ ▐ является HTML и производится с помощью этого кода:▐▐.

вот пример JSFiddle.

Я нашел его, он находится в разных технических блоках. (U+23F8)

Я использую▌▐

HTML:▐ ▌

CSS:90\A08C

Если вы хотите, чтобы один символ соответствовал треугольнику справа для "игры", попробуйте римскую цифру 2. ⅱ Составляет Ⅱ в HTML. Если вы можете поместить теги форматирования вокруг него, он выглядит очень хорошо жирным шрифтом. ⅱ и <b>&#8545;</b> в HTML. Это имеет гораздо лучшую поддержку, чем ранее упомянутый двойной вертикальный бар.

современные браузеры также поддерживают "двойную вертикальную полосу" (U + 23F8):

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

для музыкального проигрывателя он может выступать в качестве компаньона для "черного указателя вправо" (U + 25BA), потому что они оба имеют одинаковую ширину и высоту, что делает его идеальным для кнопки воспроизведения/паузы:

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

нет символов, закодированных для использования в качестве символа паузы, хотя различные символы или комбинации символов могут выглядеть более или менее как символ паузы, в зависимости от шрифта.

в обсуждении в публичном списке рассылки Unicode в 2005 году, a предложение было сделано, чтобы использовать две копии символа U+275A HEAVY VERTICAL BAR:❚ ❚. Но адекватность результата зависит от шрифта; например, глиф может быть спроектирован так, что бары слишком сильно отличаются друг от друга. - Обсуждение списка объясняет, почему символ паузы не был закодирован, и это не изменилось.

таким образом, лучшим вариантом является использование изображения. Если вам нужно использовать символ в тексте, лучше всего создать его в подходящем большом размере (скажем, 60 на 60 пикселей) и масштабировать его до размера текста с помощью CSS (например, установка height: 0.8em на img элемент).

символ ISO 7000 / IEC 60417 для паузы; прерывание #5111B. Смотрите Media_Controls