Próbuję znaleźć symbol Unicode, aby przycisk wyświetlał symbol pauzy Unicode. Udało mi się znaleźć, że symbol odtwarzania Unicode to, ►
ale szukam odpowiednika symbolu pauzy Unicode.
Próbuję znaleźć symbol Unicode, aby przycisk wyświetlał symbol pauzy Unicode. Udało mi się znaleźć, że symbol odtwarzania Unicode to, ►
ale szukam odpowiednika symbolu pauzy Unicode.
Odpowiedzi:
Istnieje wiele symboli, które można uznać za odpowiednie zamienniki, w tym:
| | - dwa standardowe (pogrubione) pionowe paski.
▋▋ - ▋
i jeszcze jedno▋
▌▌ - ▌
i jeszcze jedno▌
▍▍ - ▍
i jeszcze jedno▍
▎▎ - ▎
i jeszcze jedno▎
❚❚ - ❚
i jeszcze jedno❚
Mogłem przegapić jedną lub dwie, ale myślę, że te są lepsze. Oto lista symboli na wszelki wypadek.
=
z transform:rotate(90deg);
.
Pauza: ⏸︎
Unicode standardowa 13,0 (aktualizacja 2020) dostarcza Różne znaki techniczne glifów w zakresie HEX 2300-23FF
Biorąc pod uwagę obszerną dokumentację Unicode 13.0 , niektóre glify, które możemy powiązać z popularnymi symbolami sterowania multimediami , wyglądałyby następująco:
Symbole klawiatury i interfejsu użytkownika
23CF ⏏︎ Wysuń nośnik
Symbole interfejsu użytkownika
23E9 ⏩︎ przewijanie do przodu
23EA ⏪︎ przewijanie do tyłu, przewijanie do tyłu
23EB ⏫︎ szybkie zwiększanie
23EC ⏬︎ szybkie zmniejszanie
23ED ⏭︎ przeskakiwanie do końca, następne
23EE ⏮︎ przejście do początku, poprzedni
23EF ⏯︎ przełączanie odtwarzania / pauzy
23F1 ⏱︎ stoper
23F2 ⏲︎ zegar
23F3 ⏳︎ klepsydra
23F4 ⏴ ︎ do tyłu, do tyłu
23F5 ⏵︎ do przodu, dalej, odtwórz
23F6 ⏶︎ zwiększ
23F7 ⏷︎ zmniejsz
23F8 ⏸︎ pauza
23F9 ⏹︎ zatrzymaj
23FA ⏺︎ zapisSymbole mocy z ISO 7000: 2012
23FB ⏻︎ tryb gotowości / zasilanie
23FC ⏼︎ włączanie / wyłączanie
23FD ⏽︎ włączanie
2B58 ⭘︎ wyłączanieSymbol zasilania z IEEE 1621-2004
23FE ⏾︎ moc snu
Plik należy zapisać przy użyciu kodowania UTF-8 bez BOM (które w większości środowisk programistycznych jest ustawione domyślnie), aby poinstruować parser, jak poprawnie przekształcić bajty w znaki. <meta charset="utf-8"/>
powinno być używane bezpośrednio po <head>
w pliku HTML i upewnij się, że Content-Type: text/html; charset=utf-8
ustawione są prawidłowe nagłówki HTTP .
Przykłady:
HTML⏩ Pictograph
⏩︎ 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"
Aby zapobiec glif od bycia „kolor emojified” ⏩︎ / ⏩ dołączająca kod U + FE0E Tekst Selektor Przedstawienie zażądać wariant standardowej (na przykład: ⏩︎
)
Znaki z zakresu Unicode są wrażliwe na środowisko rodziny czcionek, z którego są używane, aplikację, przeglądarkę, system operacyjny, platformę.
Gdy nieznane lub brakujące - zamiast tego możemy zobaczyć symbole takie jak lub ▯, a nawet niespójne zachowanie z powodu różnic w implementacjach parsera HTML przez różnych dostawców.
Na przykład w przeglądarkach Windows Chromium przyrostek Standardized Variant U + FE0E jest błędny, a takim symbolom nadal lepiej towarzyszy CSS, tj .: font-family: "Segoe UI Symbol"
wymuszenie tej konkretnej czcionki na kolorowym emoji (zwykle rozpoznawanym jako „Segoe UI Emoji”) - co przeczy cel U + FE0E na pierwszym miejscu - czas pokaże…
Aby obejść problemy związane z nieobsługiwanymi znakami - dobrym rozwiązaniem jest użycie skalowalnych zestawów czcionek ikon, takich jak np .:
<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>
i wiele innych, które można znaleźć na wolności; i wreszcie to naprawdę przydatne narzędzie online: generator czcionek i ikon, Icomoon.io .
Przydać się mogą:
⏩
⏪
⓫
⏬
⏭
⏮
⏯
⏴
⏵
⏶
⏷
⏸
⏹
⏺
UWAGA : najwyraźniej te znaki nie są zbyt dobrze obsługiwane w popularnych czcionkach, więc jeśli planujesz ich używać w Internecie, wybierz czcionkę internetową, która je obsługuje.
▐▐ jest HTML i jest wykonana z tego kodu: ▐▐
.
Znalazłem go, jest w bloku Różne techniczne. ⏸ (U + 23F8)
Używam ▐ ▌
HTML: ▐ ▌
CSS: \2590\A0\258C
Jeśli chcesz, aby pojedynczy znak pasował do trójkąta skierowanego w prawo w celu „odtwarzania”, wypróbuj cyfrę rzymską 2. Ⅱ
in jest w formacie HTML. Jeśli możesz umieścić wokół niego tagi formatujące, wygląda to naprawdę dobrze, pogrubione. Ⅱ jest <b>Ⅱ</b>
w formacie HTML. Ma to znacznie lepsze wsparcie niż wspomniany wcześniej podwójny pionowy pasek.
Nowoczesne przeglądarki obsługują również opcję „DOUBLE VERTICAL BAR” (U + 23F8):
http://www.fileformat.info/info/unicode/char/23f8/index.htm
W przypadku odtwarzacza muzycznego może działać jako towarzysz `` CZARNEGO WSKAŹNIKA W PRAWO '' (U + 25BA), ponieważ oba mają równą szerokość i wysokość, dzięki czemu idealnie nadają się do przycisku odtwarzania / pauzy:
Nie ma zakodowanego znaku do użycia jako symbol pauzy, chociaż różne znaki lub kombinacje znaków mogą wyglądać mniej więcej jak symbol pauzy, w zależności od czcionki.
W dyskusji publicznej listy Unicode w 2005 roku propozycja została wykonana użyć dwóch kopii znaku U + 275A HEAVY pionowy pasek: ❚❚. Ale adekwatność wyniku zależy od czcionki; na przykład glif mógł zostać zaprojektowany w taki sposób, że paski są zbyt daleko od siebie. - Dyskusja na liście wyjaśnia, dlaczego symbol pauzy nie został zakodowany i to się nie zmieniło.
Dlatego najlepszą opcją jest użycie obrazu. Jeśli potrzebujesz użyć symbolu w tekście, najlepiej jest utworzyć go w odpowiednio dużym rozmiarze (powiedzmy 60 na 60 pikseli) i przeskalować go do rozmiaru tekstu za pomocą CSS (np. Ustawienie height: 0.8em
na img
elemencie).
Symbol ISO 7000 / IEC 60417 dla pauzy; Przerwanie to # 5111B. Zobacz Media_Controls