HTML pour le symbole de pause dans les contrôles audio et vidéo
J'essaie de trouver le symbole Unicode pour qu'un bouton affiche le symbole de pause Unicode. J'ai pu constater que le symbole de lecture Unicode est ► mais je recherche l'équivalent du symbole de pause Unicode.
Divers symboles peuvent être considérés comme des remplacements adéquats, notamment:
| | - deux barres verticales standard (en gras).
▋▋ -
▋et un autre▋▌▌ -
▌et un autre▌▍▍ -
▍et un autre▍▎▎ -
▎et un autre▎❚❚ -
❚et un autre❚
J'en ai peut-être manqué un ou deux, mais je pense que ce sont les meilleurs. Voici une liste de symboles juste au cas où.
Pour éviter de jouer avec les caractères non pris en charge, vous pouvez utiliser un jeu de polices-icônes dimensionnable, tel que:
Police 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>GoogleIcônes
<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>ou tout autre jeu de polices que vous pouvez trouver dans la nature .
Icônes de joueur utilisant des caractères UTF-8
démonstration de jsBin avec des exemples étendus
Après une recherche approfondie J'ai sélectionné à la main les meilleurs qui répondent à ces exigences:
- Peut être groupé avec au moins 2 autres symboles de caractères
- Ajustez gracieusement (centré) dans la hauteur de ligne prédéfinie; (comme si placé dans l'élément
<button>) - Nécessite moins d'ajustements en CSS (comme par exemple l'espacement des lettres pour une pause, etc.)
NB: Les font-family ] == de StackOverflow pourraient ne pas convenir à cet aperçu, essayez le code de votre page ou organisez symboles avec ceux qui correspondent le mieux.
Notez également que Firefox possède un ensemble de glyphes internes auquel vous vous replierez, tandis que Chrome affiche un boîte vide pour les manquants. Assurez-vous que vous obtenez le même résultat sur tous les appareils et les navigateurs.
❙❙ ❚❚ ► ⏪ ⏩
◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩
◾ ▮▮ ▶ ●
◾ ▮▮ ▶ ●
▯▯ ▷ ⚬ ∘
◽ ▯▯ ▷ ⚬ ∘
❘ ❘ ▷ ◯
◻ ❘ ❘ ▷ ◯
▪ • ▹ ◦
▪ ▸ • ▫ ▹ ◦
(Pour limiter l’espace sur l’icône pause , utilisez CSS: letter-spacing:-1px;)
Extras:
⌷⌷ ■ □ ∎ ☐ ⟳ ⥀
∞ ⚫ ⚬
‣ ⌷⌷ ■ □ ∎ ⃞ ☐ ⟲ ⟳ ⥀
⏏ ☰ ⁌ ⁍ ⧏ ⧐ ⑈ ∞ ⚫ ⚬
◽॥ ∘ ⋝
⊶ ⎋ ⚭
⊖⊕⊙
↻↺
≡ ⋮
≛≣
★★★★ ☆
⋜ ◽ ॥ ⊲ ∘ ⋝ //Prv, St, Pau, Ply, Rec, Nxt
⌳ ⋈ ∿ ⊶ ⎋ ⚭ //Fad, X-Fad, Fx, Eq, Pan, Stereo
⊖⊕⊙ //Vol-, Vol+, Mute
↻↺ //Repeat
≡⋮ //Menu, Options
≛≣ //Favorited, Add to Fav. (Tracks list)
★★★★☆ // Rating
Comme vous pouvez le constater aucune des autres réponses suggérées ne correspondait à mes exigences, et voici un exemple pour lequel:
<h2>Problematic</h2>
<button>||</button> || Two pipes :( bye fellas...
<br><br>
<button>▐▐</button> &#9616;#9616; Too tall and messed spacing!
<br><br>
<button>▋▋</button> &#9611;#9611; Too large and messed spacing!
<br><br>
<button>▐ ▌</button> &#9616;&#9616; Lovable but... Tall and cannot fit-size with any other player symbol
<br><br>
<button>▌▌</button> &#9612;&#9612; Way too tall and messed spacing!
<br><br>
<button>▗ ▖</button> &#9623;&#9622; Wrong alignment + extra spacing
<br><br>
<button>⬤</button> &#11044; Height...
<br><br>P.S: Générateur de caractères Unicode UTF-8 de: https://stackoverflow.com/a/25986009
Après peut être utile:
- ⏩
⏩ - ⏪
⏪ - ⏫
⓫ - ⏬
⏬ - ⏭
⏭ - ⏮
⏮ - ⏯
⏯ - ⏴
⏴ - ⏵
⏵ - ⏶
⏶ - ⏷
⏷ - ⏸
⏸ - ⏹
⏹ - ⏺
⏺
NOTE: apparemment, ces caractères ne sont pas très bien pris en charge par les polices courantes. Si vous envisagez de les utiliser sur le Web, assurez-vous de choisir une police Web qui les prend en charge.
▐▐ est HTML et est créé avec le code suivant: ▐▐.
Je l’ai trouvé, c’est dans le bloc technique divers. (U + 23F8)
J'utilise ▐ ▌
HTML: ▐ ▌
CSS: \2590\A0\258C
Si vous voulez qu'un personnage composé d'un seul caractère corresponde au triangle tourné vers la droite pour "jouer", essayez le chiffre romain 2. est Ⅱ en HTML. Si vous pouvez mettre des balises de formatage autour de lui, cela aura l'air vraiment bien en gras. Ⅱ is <b>Ⅱ</b> en HTML. Ceci a un support bien meilleur que la double barre verticale mentionnée précédemment.
Les navigateurs modernes supportent également 'DOUBLE VERTICAL BAR' (U + 23F8):
http://www.fileformat.info/info/unicode/char/23f8/index.htm
Pour un lecteur de musique, il peut servir de compagnon pour 'POINTEUR DE POINTAGE DROIT NOIR' (U + 25BA), car ils partagent la même largeur et la même hauteur, ce qui le rend parfait pour un bouton de lecture/pause:
Le symbole ISO 7000/IEC 60417 pour Pause; L'interruption est # 5111B. Voir Media_Controls
Il n'y a pas de caractère codé pour être utilisé comme symbole de pause, bien que divers caractères ou combinaisons de caractères puissent ressembler plus ou moins à un symbole de pause, en fonction de la police.
Lors d’une discussion sur la liste de diffusion Unicode publique en 2005, une suggestion a été créée pour utiliser deux copies du caractère U + 275A HEAVY VERTICAL BAR:. Mais l'adéquation du résultat dépend de la police de caractères; Par exemple, le glyphe pourrait avoir été conçu pour que les barres soient trop écartées. - La liste de discussion explique pourquoi un symbole de pause n'a pas été codé et cela n'a pas changé.
Ainsi, la meilleure option consiste à utiliser une image. Si vous devez utiliser le symbole dans le texte, il est préférable de le créer avec une taille suffisamment grande (par exemple 60 x 60 pixels) et de le réduire à la taille du texte avec CSS (par exemple, en définissant height: 0.8em sur le img element).