I'm trying to find the Unicode symbol to make a button display the Unicode pause symbol. I was able to find that the Unicode play symbol is ► but I'm looking for the equivalent of the Unicode pause symbol.
There are various symbols which could be considered adequate replacements, including:
| | - two standard (bolded) vertical bars.
▋▋ -
▋and another▋▌▌ -
▌and another▌▍▍ -
▍and another▍▎▎ -
▎and another▎❚❚ -
❚and another❚
I may have missed out one or two, but I think these are the better ones. Here's a list of symbols just in case.
To avoid messing with unsupported characters you can use a scalable icon font set like:
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 Icons
<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>or any other font-set you can find in the wild.
Player Icons using UTF-8 characters
jsBin demo with extended examples
After an extensive research I hand-picked the best ones that satisfied this requirements:
- Can be grouped with at least 2 other character symbols
- Fit gracefully (centered) into the predefined line-height; (like if placed inside
<button>element) - Require the less amount of adjustments in CSS (like i.e. letter-spacing for pause etc)
NB:
StackOverflow's font-family might not be appropriate for this preview, try the code in your page or arrange symbols with the ones that best fit.
Note also that Firefox has an internal glyph set which'll fallback to, while Chrome shows an empty box for the missing ones. Make sure you got the same result across devices and browsers.
◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩
◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩
◾ ▮▮ ▶ ●
◾ ▮▮ ▶ ●
◽ ▯▯ ▷ ⚬ ∘
◽ ▯▯ ▷ ⚬ ∘
◻ ❘ ❘ ▷ ◯
◻ ❘ ❘ ▷ ◯
▪ ▸ • ▫ ▹ ◦
▪ ▸ • ▫ ▹ ◦
(To narrow the space on the some pause icon use CSS: letter-spacing:-1px;)
Extras:
‣ ⌷⌷ ■ □ ∎ ☐ ⟲ ⟳ ⥀
⏏ ☰ ⁌ ⁍ ⧏ ⧐ ∞ ⚫ ⚬
‣ ⌷⌷ ■ □ ∎ ⃞ ☐ ⟲ ⟳ ⥀
⏏ ☰ ⁌ ⁍ ⧏ ⧐ ⑈ ∞ ⚫ ⚬
⋜ ◽ ॥ ⊲ ∘ ⋝
⌳ ⋈ ∿ ⊶ ⎋ ⚭
⊖⊕⊙
↻↺
≡⋮
≛≣
★★★★☆
⋜ ◽ ॥ ⊲ ∘ ⋝ //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
As you can notice none of the other suggested answers did fit my requirements, and here's an example why:
<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>P.S: UTF-8 Unicode Characters Generator from: https://stackoverflow.com/a/25986009
Following may come in handy:
- ⏩
⏩ - ⏪
⏪ - ⏫
⓫ - ⏬
⏬ - ⏭
⏭ - ⏮
⏮ - ⏯
⏯ - ⏴
⏴ - ⏵
⏵ - ⏶
⏶ - ⏷
⏷ - ⏸
⏸ - ⏹
⏹ - ⏺
⏺
NOTE: apparently, these characters aren't very well supported in popular fonts, so if you plan to use it on the web, be sure to pick a webfont that supports these.
▐▐ is HTML and is made with this code: ▐▐.
I found it, it’s in the Miscellaneous Technical block. ⏸ (U+23F8)
I'm using ▐ ▌
HTML: ▐ ▌
CSS: \2590\A0\258C
If you want one that's a single character to match the right-facing triangle for "play," try Roman numeral 2. Ⅱ is Ⅱ in HTML. If you can put formatting tags around it, it looks really good in bold. Ⅱ is <b>Ⅱ</b> in HTML. This has much better support than the previously mentioned double vertical bar.
Modern browsers support 'DOUBLE VERTICAL BAR' (U+23F8), too:
http://www.fileformat.info/info/unicode/char/23f8/index.htm
For a music player it can act as a companion for 'BLACK RIGHT-POINTING POINTER' (U+25BA) because they both share equal width and height making it perfect for a play/pause button:
There is no character encoded for use as a pause symbol, though various characters or combinations of characters may look more or less like a pause symbol, depending on font.
In a discussion in the public Unicode mailing list in 2005, a suggestion was made to use two copies of the U+275A HEAVY VERTICAL BAR character: ❚❚. But the adequacy of the result depends on font; for example, the glyph might have been designed so that the bars are too much apart. – The list discussion explains why a pause symbol had not been encoded, and this has not changed.
Thus, the best option is to use an image. If you need to use the symbol in text, it is best to create it in a suitably large size (say 60 by 60 pixels) and scale it down to text size with CSS (e.g., setting height: 0.8em on the img element).
The ISO 7000 / IEC 60417 Symbol for Pause; Interruption is #5111B. See Media_Controls
来源：https://stackoverflow.com/questions/22885702/html-for-the-pause-symbol-in-audio-and-video-control