programing

오디오 및 비디오 컨트롤의 일시 중지 기호에 대한 HTML

nasanasas 2020. 9. 6. 10:08
반응형

오디오 및 비디오 컨트롤의 일시 중지 기호에 대한 HTML


버튼에 유니 코드 일시 중지 기호를 표시하기 위해 유니 코드 기호를 찾으려고합니다. 유니 코드 재생 기호가라는 것을 알 수 &#9658있었지만 유니 코드 일시 중지 기호에 해당하는 것을 찾고 있습니다.


다음을 포함하여 적절한 대체물로 간주 될 수있는 다양한 기호가 있습니다.

  1. | | -두 개의 표준 (굵은) 수직 막대.

  2. ▋▋- ▋그리고 다른▋

  3. ▌▌- ▌기타▌

  4. ▍▍- ▍및 다른▍

  5. ▎▎- ▎그리고 다른▎

  6. ❚❚- ❚그리고 다른❚

나는 한두 개를 놓쳤을 수도 있지만 이것이 더 나은 것 같아요. 다음 은 만일을 대비 한 기호 목록입니다 .


지원되지 않는 문자를 엉망으로 만들지 않으려면 다음과 같은 확장 가능한 아이콘 글꼴 세트를 사용할 수 있습니다.

멋진 글꼴

플레이어 아이콘-확장 가능-멋진 글꼴

<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'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.


◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩

&#9724; &#10073;&#10073; &#10074;&#10074; &#9658; &#9899; &#9194; &#9193;

◾ ▮▮ ▶ ●

&#9726; &#9646;&#9646; &#9654; &#9679;

◽ ▯▯ ▷ ⚬ ∘

&#9725; &#9647;&#9647; &#9655; &#9900; &#8728; 

◻ ❘ ❘ ▷ ◯

&#9723; &#10072; &#10072; &#9655; &#9711;

▪ ▸ • ▫ ▹ ◦

&#9642; &#9656; &#8226; &#9643; &#9657; &#9702;

(To narrow the space on the some pause icon use CSS: letter-spacing:-1px;)

Extras:

‣ ⌷⌷ ■ □ ∎ ☐ ⟲ ⟳ ⥀
⏏ ☰ ⁌ ⁍ ⧏ ⧐ ∞ ⚫ ⚬

&#8227; &#9015;&#9015; &#9632; &#9633; &#8718; &#8414; &#9744; &#10226; &#10227; &#10560;
&#9167; &#9776; &#8268; &#8269; &#10703; &#10704; &#9288; &#8734; &#9899; &#9900;

⋜ ◽ ॥ ⊲ ∘ ⋝
⌳ ⋈ ∿ ⊶ ⎋ ⚭
⊖⊕⊙
↻↺
≡⋮
≛≣
★★★★☆

&#8924; &#9725; &#2405; &#8882; &#8728; &#8925; //Prv, St, Pau, Ply, Rec, Nxt    
&#9011; &#8904; &#8767; &#8886; &#9099; &#9901; //Fad, X-Fad, Fx, Eq, Pan, Stereo
&#8854;&#8853;&#8857; //Vol-, Vol+, Mute  
&#8635;&#8634; //Repeat    
&#8801;&#8942; //Menu, Options  
&#8795;&#8803; //Favorited, Add to Fav. (Tracks list)  
&#9733;&#9733;&#9733;&#9733;&#9734; // 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>&#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 Unicode Characters Generator from: https://stackoverflow.com/a/25986009


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.


▐▐  is HTML and is made with this code: &#9616;&#9616;.

Here's an example JSFiddle.


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


I'm using ▐ ▌

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

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 &#8545; in HTML. If you can put formatting tags around it, it looks really good in bold. is <b>&#8545;</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:

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


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).


일시 중지를위한 ISO 7000 / IEC 60417 기호 중단은 # 5111B입니다. Media_Controls 참조

참고 URL : https://stackoverflow.com/questions/22885702/html-for-the-pause-symbol-in-audio-and-video-control

반응형