Menu
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.
351
HTML Audio/Video DOM pause() MethodThe pause() method halts (pauses) the currently playing audio or video. Tip: Use the play() method to start playing the current audio/video.
HTML | DOM Audio pause() Method The HTML DOM Audio pause() Method is used to pause the currently playing audio. To use the audio pause() method, one must use the controls property to display the audio controls such as play, pause, volume, etc, attached on the audio.
pause() The HTMLMediaElement. pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.
var video = document. getElementById('player'); video. addEventListener('click',function(){ if(video. paused){ video().
Pause: ⏸︎
The Unicode Standard 13.0 (update 2020) provides the Miscellaneous Technical glyphs in the HEX range 2300–23FF
Given the extensive Unicode 13.0 documentation, some of the glyphs we can associate to common Media control symbols would be as following:
Keyboard and UI symbols
23CF ⏏︎ Eject media
User interface symbols
23E9 ⏩︎ fast forward
23EA ⏪︎ rewind, fast backwards
23EB ⏫︎ fast increase
23EC ⏬︎ fast decrease
23ED ⏭︎ skip to end, next
23EE ⏮︎ skip to start, previous
23EF ⏯︎ play/pause toggle
23F1 ⏱︎ stopwatch
23F2 ⏲︎ timer clock
23F3 ⏳︎ hourglass
23F4 ⏴︎ reverse, back
23F5 ⏵︎ forward, next, play
23F6 ⏶︎ increase
23F7 ⏷︎ decrease
23F8 ⏸︎ pause
23F9 ⏹︎ stop
23FA ⏺︎ recordPower symbols from ISO 7000:2012
23FB ⏻︎ standby/power
23FC ⏼︎ power on/off
23FD ⏽︎ power on
2B58 ⭘︎ power offPower symbol from IEEE 1621-2004
23FE ⏾︎ power sleep
A file must be saved using UTF-8 encoding without BOM (which in most development environments is set by default) in order to instruct the parser how to transform the bytes into characters correctly. <meta charset="utf-8"/> should be used immediately after <head> in a HTML file, and make sure the correct HTTP headers Content-Type: text/html; charset=utf-8 are set.
Examples:
HTML
⏩ Pictograph ⏩︎ Standardized Variant .icon-ff:before { content: "\23E9" } .icon-ff--standard:before { content: "\23E9\FE0E" } EL_iconFF.textContent = "\u23E9"; EL_iconFF_standard.textContent = "\u23E9\uFE0E" To prevent a glyph from being "color-emojified" ⏩︎ / ⏩ append the code U+FE0E Text Presentation Selector to request a Standardized variant: (example: ⏩︎)
Characters in the Unicode range are susceptible to the font-family environment they are used, application, browser, OS, platform.
When unknown or missing - we might see symbols like � or ▯ instead, or even inconsistent behavior due to differences in HTML parser implementations by different vendors.
For example, on Windows Chromium browsers the Standardized Variant suffix U+FE0E is buggy, and such symbols are still better accompanied by CSS i.e: font-family: "Segoe UI Symbol" to force that specific Font over the Colored Emoji (usually recognized as "Segoe UI Emoji") - which defies the purpose of U+FE0E in the first place - time will tell…
To circumvent problems related to unsupported characters - a viable solution is to use scalable icon font-sets like i.e:
<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>
<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>and many other you can find in the wild; and last but not least, this really useful online tool: font-icons generator, Icomoon.io.
134
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
