Answered Oct 25, 2014 · 128 votes
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.
Answered Apr 27, 2020 · 235 votes
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:
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 ⏺︎ record
23FB ⏻︎ standby/power 23FC ⏼︎ power on/off 23FD ⏽︎ power on 2B58 ⭘︎ power off
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.
⏩ 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.
Answered Aug 23, 2015 · 64 votes
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.
