发表新帖
发表新帖

HTML for the Pause symbol in audio and video control

后端 未结
关注
10 2110
遥遥无期
遥遥无期 2020-12-22 17:21

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

相关标签:
10条回答
  • 天命终不由人
    2020-12-22 17:34

    I found it, it’s in the Miscellaneous Technical block. ⏸ (U+23F8)

    0 讨论(0)
  • 一个人的身影
    2020-12-22 17:35

    Unicode Standard for Media Control Symbols

    Pause: ⏸︎

    The Unicode Standard 13.0 (update 2020) provides the Miscellaneous Technical glyphs in the HEX range 2300–23FF

    Miscellaneous Technical

    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 ⏺︎ record

    Power symbols from ISO 7000:2012

    23FB ⏻︎ standby/power
    23FC ⏼︎ power on/off
    23FD ⏽︎ power on
    2B58 ⭘︎ power off

    Power symbol from IEEE 1621-2004

    23FE ⏾︎ power sleep

    Use on the Web:

    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 
    &#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
    CSS 
    .icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
    JavaScript 
    EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

    Standardized variant

    To prevent a glyph from being "color-emojified" ⏩︎ / ⏩ append the code U+FE0E Text Presentation Selector to request a Standardized variant: (example: &#x23e9;&#xfe0e;)

    Inconsistencies

    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…

    Scalable icon fonts

    To circumvent problems related to unsupported characters - a viable solution is to use scalable icon font-sets like i.e:

    Font Awesome

    Player icons - scalable - 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>

    and many other you can find in the wild; and last but not least, this really useful online tool: font-icons generator, Icomoon.io.

    0 讨论(0)
  • 遥遥无期
    2020-12-22 17:35

    I'm using ▐ ▌

    HTML: &#9616;&nbsp;&#9612;

    CSS: \2590\A0\258C

    0 讨论(0)
  • 挽巷
    2020-12-22 17:36

    There are various symbols which could be considered adequate replacements, including:

    1. | | - two standard (bolded) vertical bars.

    2. ▋▋ - &#9611; and another&#9611;

    3. ▌▌ - &#9612; and another&#9612;

    4. ▍▍ - &#9613; and another&#9613;

    5. ▎▎ - &#9614; and another&#9614;

    6. ❚❚ - &#10074; and another &#10074;

    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.

    0 讨论(0)
  • 梦如初夏
    2020-12-22 17:39

    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:

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

    0 讨论(0)
  • 星月不相逢
    2020-12-22 17:48

    Following may come in handy:

    • ⏩ &#x23e9;
    • ⏪ &#x23ea;
    • ⏫ &#x24eb;
    • ⏬ &#x23ec;
    • ⏭ &#x23ed;
    • ⏮ &#x23ee;
    • ⏯ &#x23ef;
    • ⏴ &#x23f4;
    • ⏵ &#x23f5;
    • ⏶ &#x23f6;
    • ⏷ &#x23f7;
    • ⏸ &#x23f8;
    • ⏹ &#x23f9;
    • ⏺ &#x23fa;

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题