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


97

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


1
이 같은 질문이 있었지만 "중지"버튼 (사각형)에 대한 질문입니다. Roko의 대답은 이것에 가장 적합했습니다.
starmandeluxe

답변:


106

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

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

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

  3. ▌▌- ▌기타▌

  4. ▍▍- ▍및 다른▍

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

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

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


나는 이것을 사용했다 : 𝍪.
JoshuaD 2017 년

& # 9646; HTML의 실제 일시 중지 기호입니다.
Fla

@JoshuaD 여러 브라우저를 지원하려면 해당 브라우저를 사용해서는 안됩니다. 최신 Firefox를 사용하고 있는데 읽을 수 없습니다.
하나님의 자녀

3
내가 사용 =과 함께 transform:rotate(90deg);.
Joe DF

1
@AChildofGod-브라우저에 관한 것이 아니라 컴퓨터에 설치된 글꼴에 따라 다릅니다.
kubi

176

미디어 제어 기호에 대한 유니 코드 표준

일시 중지 : ⏸︎

유니 코드 표준 13.0 (갱신 2020) 제공하는 기타 기술 16 진수 범위에서 글리프를 2300-23FF

기타 기술

광범위한 감안 유니 코드 13.0 문서를 일반적인 미디어 컨트롤 기호에 연결할 수있는 일부 글리프는 다음과 같습니다.

키보드 및 UI 기호

23CF ⏏︎ 미디어 꺼내기

사용자 인터페이스 기호

23E9 ⏩︎ 빨리 감기
23EA ⏪︎ 되감기, 빨리 뒤로
23EB ⏫︎ 빨리 증가
23EC ⏬︎ 빨리 감소
23ED ⏭︎ 끝으로 건너 뛰기, 다음
23EE ⏮︎ 시작으로 건너 뛰기, 이전
23EF ⏯︎ 재생 / 일시 중지 토글
23F1 ⏱︎ 스톱워치
23F2 ⏲︎ 타이머 시계
23F3 ⏳︎ 모래 시계
23F4 ⏴ ︎ 반전, 뒤로
23F5 ⏵︎ 앞으로, 다음, 재생
23F6 ⏶︎ 증가
23F7 ⏷︎ 감소
23F8 ⏸︎ 일시 중지
23F9 ⏹︎ 중지
23FA ⏺︎ 기록

ISO 7000 : 2012의 전원 기호

23FB ⏻︎ 대기 / 전원
23FC ⏼︎ 전원 켜기 / 끄기
23FD ⏽︎ 전원 켜기
2B58 ⭘︎ 전원 끄기

IEEE 1621-2004의 전원 기호

23FE ⏾︎ 파워 슬립

웹에서 사용 :

파서에 바이트를 문자로 올바르게 변환하는 방법을 지시하려면 BOM없이 UTF-8 인코딩 사용하여 파일을 저장해야합니다 (대부분의 개발 환경에서 기본적으로 설정 됨). HTML 파일 에서 <meta charset="utf-8"/>바로 뒤에 사용해야하며 올바른 HTTP 헤더를 확인해야합니다.<head>Content-Type: text/html; charset=utf-8 가 설정되어 .

예 :

HTML
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
CSS
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
자바 스크립트
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

표준화 된 변형

글리프가 "색상 이모 징" 되는 것을 방지하려면 ⏩︎ / ⏩ 코드 U + FE0E 텍스트 프레젠테이션 선택기추가 하여 표준화 된 변형 을 요청합니다 . (예 :&#x23e9;&#xfe0e; )

불일치

유니 코드 범위의 문자는 사용되는 글꼴 계열 환경, 응용 프로그램, 브라우저, OS, 플랫폼에 영향을받습니다.
알 수없는 또는 실종 - 우리는 또는 ▯ 대신에, 심지어는 같은 기호를 볼 수 있습니다 일관성이 동작을 인해 서로 다른 벤더에 의해 HTML 파서 구현의 차이.
에 예를 들어, 윈도우 크롬은 브라우저를 표준화 변형 접미사 U + FE0E은 버그이며, 같은 기호는 여전히 더 나은 CSS 즉 동반 : font-family: "Segoe UI Symbol"(일반적으로 "Segoe UI 이모티콘"로 인식)을 컬러 이모티콘을 통해 특정 글꼴을 강제로 - 어떤 무시 처음에 U + FE0E의 목적-시간이 알려줄 것입니다…


확장 가능한 아이콘 글꼴

지원되지 않는 문자 와 관련된 문제를 피하려면 실행 가능한 솔루션은 다음과 같은 확장 가능한 아이콘 글꼴 세트 를 사용하는 것입니다 .

멋진 글꼴

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

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

그리고 당신은 야생에서 찾을 수있는 다른 많은 것; 마지막으로 정말 유용한 온라인 도구 인 font-icons generator, Icomoon.io 입니다.



2
정말 도움이되는 답변 감사합니다.
Daniel Barde

1
귀찮게도 Google 글꼴 / 아이콘에는 "원형 정지"버튼이 없으므로 "원형 재생"및 "원형 일시 정지"세트가 불완전합니다 ...
Fizz


굉장한 답변-나는 그것에 투입된 노력을 사랑합니다. 이 과소 평가 된 답변에서 @intotecho가 지적한 공식 "ISO 7000 / IEC 60417 일시 중지 기호, 중단은 # 5111B입니다. Media_Controls 참조"를 보셨습니까? → stackoverflow.com/a/48918561/4575793
Cadoiz

58

다음이 유용 할 수 있습니다.

  • &#x23e9;
  • &#x23ea;
  • &#x24eb;
  • &#x23ec;
  • &#x23ed;
  • &#x23ee;
  • &#x23ef;
  • &#x23f4;
  • &#x23f5;
  • &#x23f6;
  • &#x23f7;
  • &#x23f8;
  • &#x23f9;
  • &#x23fa;

참고 : 이러한 문자는 인기있는 글꼴에서 잘 지원되지 않으므로 웹에서 사용할 계획이라면 이러한 문자를 지원하는 웹 글꼴을 선택해야합니다.



22

찾았습니다. Miscellaneous Technical 블록에 있습니다. ⏸ (U + 23F8)


3
정답이 어떻게 비추천되었는지 확실하지 않습니다. 이 "이중 수직 막대"가 주석에서 "일시 중지"로 표시되는 아래 링크를 참조하십시오. 안타깝게도 글꼴에서 제대로 지원되지 않는 것 같습니다 (2014 년 6 월 유니 코드에 추가됨). fileformat.info/info/unicode/char/23f8/index.htm
Anm

12

▐ 사용하고 있습니다 ▌

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

CSS : \2590\A0\258C


5

"놀이"를 위해 오른쪽 삼각형과 일치하는 단일 문자를 원하면 로마 숫자 2를 입력하십시오. Ⅱ는 &#8545;HTML입니다. 주위에 서식 태그를 넣을 수 있으면 굵게 표시되어 정말 좋아 보입니다. <b>&#8545;</b>HTML로되어 있습니다. 이것은 앞서 언급 한 이중 수직 막대보다 훨씬 더 잘 지원됩니다.


대담하게 만들어 주셔서 기쁩니다. 나는 & # 2405; 굵게 표시하면 더 좋아 보입니다.
efreed

5

최신 브라우저는 'DOUBLE VERTICAL BAR'(U + 23F8)도 지원합니다.

http://www.fileformat.info/info/unicode/char/23f8/index.htm

음악 플레이어의 경우 'BLACK RIGHT-POINTING POINTER'(U + 25BA)의 동반자 역할을 할 수 있습니다. 둘 다 동일한 너비와 높이를 공유하므로 재생 / 일시 정지 버튼에 적합합니다.

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


1
Mac에서 이중 세로 막대는 스큐 어모 픽 상자로 둘러싸여 있으며 검은 색 오른쪽을 가리키는 포인터와 다르게 보입니다.

2

일시 중지 기호로 사용하기 위해 인코딩 된 문자는 없지만 글꼴에 따라 다양한 문자 또는 문자 조합이 일시 중지 기호처럼 보일 수 있습니다.

2005 년에 공개 된 유니 코드 메일 링리스트의 토론에서 U + 275A HEAVY VERTICAL BAR 문자 ❚❚의 두 가지 사본을 사용하도록 제안 되었습니다. 그러나 결과의 적절성은 글꼴에 따라 다릅니다. 예를 들어, 막대가 너무 멀리 떨어져 있도록 글리프를 디자인했을 수 있습니다. – 목록 토론에서는 일시 중지 기호가 인코딩되지 않은 이유와 변경되지 않은 이유를 설명합니다.

따라서 가장 좋은 방법은 이미지를 사용하는 것입니다. 텍스트의 기호를 사용해야하는 경우 (60 60 픽셀을 말한다) 적당히 큰 크기를 만들고 CSS와 텍스트 크기로 축소하는 것이 가장 좋습니다 (예를 들어, 설정 height: 0.8em상의 img요소).


또한 "letter-spacing : -6px"와 같은 CSS를 이중 무거운 수직 막대에 추가 할 수 있으므로 실제 일시 중지 기호처럼 보입니다. 예 : jsfiddle.net/enKaA
JaGo

높이가 같기 때문에 # 9616보다 좋습니다.
Aram Kocharyan 2014-08-25

2
이 답변은 구식입니다. 유니 코드 7.0 (2014 년 출시)은이를 위해 U + 23F8 및 일치하는 기호 (재생, 중지, 녹음)를 정확하게 추가했습니다. unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.