Je recherche un caractère HTML ou ASCII qui est un triangle pointant vers le haut ou vers le bas afin de pouvoir l'utiliser comme interrupteur à bascule.
J'ai trouvé ↑ ( ↑
) et ↓ ( ↓
) - mais ceux-ci ont une tige étroite. Je cherche juste la flèche HTML "tête".
Réponses:
Têtes de flèches Unicode:
Pour ▲ et ▼, utilisez
▲
et▼
respectivement si vous ne pouvez pas inclure directement les caractères Unicode (utilisez UTF-8!).Notez que la prise en charge des polices pour les versions plus petites n'est pas aussi bonne. Mieux vaut utiliser les grandes versions dans des polices plus petites.
Plus de flèches Unicode sont à:
Enfin, ces flèches ne sont pas ASCII, y compris ↑ et ↓: elles sont Unicode.
la source
Pour les entités HTML
◄ =
◄
► =
►
▼ =
▼
▲ =
▲
la source
OPTION 1: FLÈCHES DE TRI DE LA COLONNE UNICODE
J'ai trouvé celui-ci très pratique pour un trieur de colonnes à un seul caractère. (Semble bien mis à l'échelle) .
⇕
= ⇕REMARQUE IMPORTANTE (lors de l'utilisation de symboles Unicode)
La prise en charge Unicode varie en fonction du symbole de choix, du navigateur et de la famille de polices. Si vous trouvez que le symbole choisi ne fonctionne pas dans certains navigateurs, essayez d'utiliser une autre famille de polices. Microsoft recommande
"Segoe UI Symbol"
toutefois d'inclure la police dans votre site Web car peu de gens l'ont sur leur ordinateur.Ouvrez cette page dans d'autres navigateurs pour voir quels symboles s'affichent avec la police par défaut.
Quelques flèches Unicode supplémentaires.
Vous pouvez les copier directement sur la page ci-dessous ou vous pouvez utiliser le code.
Chaque rangée de flèches est numérotée de gauche à droite:
Insérez simplement le chiffre / lettre correspondant avant le point-virgule de fermeture comme ci-dessus.
ș
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟
Ț
↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯
ț
↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿
Ȝ
⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏
ȝ
⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟
Ȟ
⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯
ȟ
⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿
Symboles HTML Unicode supplémentaires
Une liste sélectionnée d'autres icônes / symboles Unicode utiles.
OPTION 2: CHEVRONS CSS PURS
J'ai récemment fait un article sur la création efficace de chevrons en utilisant uniquement CSS (aucune image requise).
Comment modifier simplement:
CLICK FOR DEMO ON JSFIDDLE
CSS (efficace avec prise en charge multi-navigateurs)
OPTION 3: ICÔNES D'IMAGES CSS BASE64
HAUT / BAS
VERS LE BAS
UP
En utilisant seulement quelques lignes de CSS, nous pouvons encoder nos images en base64.
CLICK FOR DEMO ON JSFIDDLE
AVANTAGES
LES INCONVÉNIENTS
CSS
la source
⇫
et ci-dessus semblent bien dans FF et IE, mais ne s'affichent pas dans Chrome.Désolé mais ils ne sont qu'en Unicode. :(
De grands:
U+25B2
(Triangle noir pointant vers le haut ▲)U+25BC
(Triangle noir pointant vers le bas ▼)U+25C0
(Triangle noir pointant vers la gauche ◀)U+25B6
(Triangle noir pointant vers la droite ▶)Grands blancs:
U+25B3
(Triangle pointant vers le haut blanc △)U+25BD
(Triangle pointant vers le bas blanc ▽)U+25C1
(Triangle blanc pointant vers la gauche ◁)U+25B7
(Triangle blanc pointant vers la droite ▷)Il y a aussi quelques petits triangles:
U+25B4
(Petit triangle noir pointant vers le haut ▴)U+25C2
(Petit triangle noir pointant vers la gauche ◂)U+25BE
(Petit triangle noir pointant vers le bas ▾)U+25B8
(Petit triangle noir pointant vers la droite ▸)Quelques blancs aussi:
U+25C3
(Petit triangle blanc pointant vers la gauche ◃)U+25BF
(Petit triangle blanc pointant vers le bas ▿)U+25B9
(Petit triangle blanc pointant vers la droite ▹)U+25B5
(Petit triangle blanc pointant vers le haut ▵)Il existe également des triangles "pointus". Vous pouvez en savoir plus ici sur Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes
Mais malheureusement, ils sont tous Unicode au lieu de ASCII. Si vous souhaitez toujours utiliser ASCII, vous pouvez utiliser un fichier image pour cela, utilisez simplement
^
etv
. (Tout comme Google Maps dans la version mobile,cela faisait référence à l' ancien Google Maps mobile)Comme d'autres l'ont également suggéré, vous pouvez également créer des triangles avec HTML, avec des bordures CSS ou des formes SVG ou même des toiles JavaScript.
CSS
SVG
Javascript
Démo
la source
Puisque vous utilisez ces flèches pour un commutateur à bascule, vous pouvez envisager de créer ces flèches avec un élément html en utilisant les styles suivants au lieu de caractères unicode.
http://jsfiddle.net/FrsGR/
la source
:after
pour créer des bulles de dialogue.Il y a des pointes de flèches littérales dans le bloc Lettres de modification d'espacement :
la source
˄
ou décimal˄
. Mais si vos encodages de page sont corrects, vous devriez simplement pouvoir les copier-coller dans le document.Il existe plusieurs façons correctes d'afficher un triangle pointant vers le bas.
Méthode 1: utiliser une entité HTML décimale
HTML:
Méthode 2: utiliser une entité HTML hexidécimale
HTML:
Méthode 3: utilisez directement le caractère
HTML:
Méthode 4: utilisez CSS
HTML:
CSS:
Chacune de ces trois méthodes doit avoir la même sortie. Pour les autres symboles, les trois mêmes options existent. Certains ont même une quatrième option, vous permettant d'utiliser une référence basée sur une chaîne (par exemple
♥
pour afficher ♥).Vous pouvez utiliser un site Web de référence comme Unicode-table.com pour trouver les icônes prises en charge dans UNICODE et les codes auxquels elles correspondent. Par exemple, vous trouvez les valeurs du triangle pointant vers le bas à http://unicode-table.com/en/25BC/ .
Notez que ces méthodes sont suffisantes uniquement pour les icônes disponibles par défaut dans tous les navigateurs. Pour des symboles comme ☃, ❄, ★, ☂, ☭, ⎗ ou ⎘, cela est beaucoup moins probable. Bien qu'il soit possible de prendre en charge plusieurs navigateurs pour d'autres symboles UNICODE, la procédure est un peu plus compliquée.
Si vous souhaitez savoir comment ajouter la prise en charge des caractères UNICODE moins courants, voir Créer une police Web avec des symboles de plan multilingue supplémentaire Unicode pour plus d'informations sur la façon de procéder.
Images de fond
Une stratégie totalement différente est l'utilisation d'images d'arrière-plan au lieu de polices. Pour des performances optimales, il est préférable d'incorporer l'image dans votre fichier CSS en l'encodant en base, comme mentionné par exemple. @ weasel5i2 et @Obsidian. Je recommanderais l'utilisation de SVG plutôt que de GIF, cependant, c'est mieux à la fois pour les performances et pour la netteté de vos symboles.
Ce code suivant est la version base64 pour et SVG de l' icône:
Quand utiliser des images d'arrière-plan ou des polices
Pour de nombreux cas d'utilisation, les images d'arrière-plan et les polices d'icônes basées sur SVG sont largement équivalentes en termes de performances et de flexibilité. Pour décider lequel choisir, tenez compte des différences suivantes:
Images SVG
color
,font-size
,line-height
,background-color
ou d' autres règles de style liées à la police pour changer l'affichage de l' icône, mais vous pouvez faire référence à différentes composantes de l'icône en forme individuellement.Polices d'icônes
color
,font-size
,line-height
,background-color
ou d' autres règles de style liées à la police pour changer l'affichage de l' icônePersonnellement, je recommanderais l'utilisation d'images d'arrière-plan uniquement lorsque vous avez besoin de plusieurs couleurs et que ces couleurs ne peuvent pas être obtenues au moyen de
color
,background-color
et d'autres règles CSS liées aux couleurs pour les polices.Le principal avantage de l'utilisation d'images SVG est que vous pouvez donner à différents composants d'un symbole leur propre style. Si vous incorporez votre code XML SVG dans le document HTML, cela ressemble beaucoup au style du HTML. Cependant, cela entraînerait une page Web qui utilise à la fois des balises HTML et des balises SVG, ce qui pourrait réduire considérablement la lisibilité d'une page Web. Il ajoute également un gonflement supplémentaire si le symbole est répété sur plusieurs pages et que vous devez tenir compte du fait que les anciennes versions d'IE n'ont pas ou peu de prise en charge de SVG.
la source
"Pas ASCII (ni l'un ni l'autre ↑ / ↓)" doit être qualifié.
Bien que ces caractères ne soient pas définis dans l' American Standard Code for Information Interchange comme des glyphes, leurs codes ont été couramment utilisés pour donner une présentation graphique des codes ASCII 24 et 25 (hex 18 et 19, CANcel et EM: End of Medium). La page de codes 437 (appelée ASCII étendu par IBM, comprend les codes numériques 128 à 255) a défini l'utilisation de ces glyphes comme codes ASCII et l'omniprésence de ces conventions a imprégné l'industrie, comme en témoigne leur déploiement en tant que normes par des sociétés leaders telles que HP, en particulier pour les imprimantes et IBM, en particulier pour les micro-ordinateurs à partir du PC d'origine.
Tout comme l'utilisation des codes ASCII pour CAN et EM était relativement obsolète à l'époque, justifiant leur utilisation en tant que glyphes, le passage du temps a également rendu l'utilisation des codes en tant que glyphes obsolète par l'utilisation actuelle des conventions UNICODE.
Il convient de souligner que les extensions ASCII faites par IBM en ASCII étendu incluaient non seulement un ensemble numérique plus grand pour les codes numériques 128 à 255, mais étendaient également l'utilisation de certains codes de contrôle numériques, dans la plage ASCII 0 à 32, de juste des protocoles de contrôle de transmission multimédia pour inclure des glyphes. Il est souvent supposé, à tort, que les premiers 0 à 128 n'étaient pas "étendus" et qu'IBM utilisait les glyphes de l'ASCII conventionnel pour cette plage. Cette erreur est également perpétrée dans l'une des références précédentes. Cette erreur est devenue si répandue qu'elle a redéfini familièrement l'ASCII de manière subliminale.
la source
Je sais que je suis en retard à la fête, mais vous pouvez également le faire avec du CSS simple:
HTML:
(Il peut s'agir de n'importe quel élément HTML, si vous utilisez un élément en ligne comme un
<span>
par exemple, assurez-vous d'en faire un élément bloc / bloc en ligne avecdisplay:block;
oudisplay:inline-block
) :<div class="up"></div>
et
<div class="down"></div>
CSS:
Vous pouvez également l'accomplir en utilisant
:before
et des:after
pseudo-éléments, ce qui est en fait un meilleur moyen car vous évitez de créer un balisage supplémentaire. Mais c'est à vous de voir comment vous souhaitez y parvenir.-
Voici une démo dans CodePen avec de nombreuses possibilités de flèches.
la source
Beaucoup de gens suggèrent ici d'utiliser les triangles, mais parfois vous avez besoin d'un chevron.
Nous avons eu un cas où notre bouton montre un chevron et nous voulions que le manuel de l'utilisateur fasse référence au bouton d'une manière qui sera également reconnue par un utilisateur non technique. Nous avions donc besoin d'un signe en chevron.
Nous avons finalement utilisé ﹀. Il est connu sous le nom de FORMULAIRE DE PRÉSENTATION POUR SUPPORT VERTICAL ANGLE DROIT et son code est U + FE40.
la source
Habituellement, le mieux est de voir un personnage dans son contexte.
Voici la liste complète des caractères Unicode et la façon dont votre navigateur les affiche actuellement. Je vois cette liste évoluer, les versions du navigateur après les autres.
Cette liste est obtenue par itération en décimal de la table unicode des entités html, cela peut prendre quelques secondes, mais elle m'est très utile dans de nombreux cas.
En survolant rapidement un caractère donné, vous obtiendrez le dec et l'hex et les raccourcis pour le générer avec un clavier.
Le même extrait qu'un bookmarklet:
Pour générer cette liste à partir de php :
Pour générer cette liste dans la console, en utilisant php :
Voici un extrait en texte brut, de flèches, certains viennent avec unicode 10.0 . http://unicode.org/versions/Unicode10.0.0/
🔙🔚🔛🔜🔝🖗🖘🖙🖚🖛🖜🖝🖞🖟🞀🞁🞂🞃🔺🔻🔼🔽𝆒𝆓𐃘⭝⭞⭟⭠⭡⭢⭣⭤⭥⭦⭧⭨⭩⭪⭫⭬⭭⭮⭯⭰⭱⭲⭳⭶⭷ ⭸⭹⭺⭻⭼⭽⭾⭿⮀⮁⮂⮃⮄⮅⮆⮇⮈⮉⮊⮋⮌⮍⮎⮏⮐⮑⮒⮓⮔⮕⮘⮙⮚⮛⮜⮝⮞⮟⮠⮡⮢⮣⮤⮥⮦⮧⮨⮩⮪⮫ ⮬⮭⮮⮯⮰⮱⮲⮳⮴⮵⮶⮷⮸⮹⮽⮾⮿⯀⯁⯂⯅⯆⯇⯈⬶⬷⬸⬹⬺⬻⬼⬽⬾⬀⬁⬂⬃⬄⬅⬆⬇⬈⬉⬊⬋⬌⬍⬎⬏⬐ ⬑⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟⤠⤡⤢⤣⤤⤥⤦⤧⤨⤩⤪⤫⤬⤭⤮⤯⤰ ⤱⤲⤳⤴⤵⤶⤷⤸⤹⤺⤻⤼⤽⤾⤿⥀⥁⥂⥃⥄⥅⥆⥇⥈⥉⥊⥋⥌⥍⥎⥏⥐⥑⥒⥓⥔⥕⥖⥗⥘⥙⥚⥛⥜⥝⥞⥟⥠⥡⥢ ⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⥰⥱⥲⥳⥴⥵⟨⟩⟪⟫⟬⟭⟮⟯⟰⟱⟲⟳⟴⟵⟶⟷⟸⟹⟺⟻⟼⟽⟾⟿➘➙➚➛➜➝➞ ➟➠➡ ➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵ ← ↑ → ↓ ↔↕↖↗↘↙↚↛↜↝ ↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏ ⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿ᐂᐃᐄᐅᐆᐇᐈᐉᐊᐋᐌᐍᐎᐏᐐᐑᐒᐓᐔᐕᐖᐗᐘᐙᐚᐛᐫᐬᐭᐮᐯᐰᐱᐲᐳᐴᐵᐶᐷᐸᐹᐺᐻᐼᐽᐾᐿᑀᑁᑂᑃᑄᑅᑆᑇᑈ🞀 🞁🞂🞃🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠐🠑🠒🠓🠔🠕🠖🠗🠘🠙🠚🠛🠜🠝🠞🠟🠠🠡🠢🠣🠤🠥🠦🠧🠨🠩🠪🠫🠬🠭🠮🠯🠰🠱🠲 🠳🠴🠵🠶🠷🠸🠹🠺🠻🠼🠽🠾🠿🡀🡁🡂🡃🡄🡅🡆🡇🡐🡑🡒🡓🡔🡕🡖🡗🡘🡙🡠🡡🡢🡣🡤🡥🡦🡧🡨🡩🡪🡫🡬🡭🡮🡯🡰🡱🡲 🡳🡴🡵🡶🡷🡸🡹🡺🡻🡼🡽🡾🡿🢀🢁🢂🢃🢄🢅🢆🢇🢐🢑🢒🢓🢔🢕🢖🢗🢘🢙🢚🢛🢜🢝🢞🢟🢠🢡🢢🢣🢤🢥🢦🢧🢨🢩🢪🢫
la source
Entités HTML pour les triangles vides
◁ =
◁
▷ =
▷
▽ =
▽
△ =
△
la source
▲ ▼ Ce sont respectivement U + 25B2 (
▲
) et U + 25BC (▼
)la source
Je pense que le demandeur peut faire référence à l'un d'eux (voir l'image ci-jointe) - J'ai trouvé cette question StackOverflow en cherchant moi-même la même chose.
Malheureusement, ce glyphe ne semble exister nulle part en tant qu'entité de caractère distincte. Wikipedia accomplit ci-dessous en utilisant javascript inline et img content = "data: image / gif ..." pour obtenir le symbole.
Soit dit en passant, voici la base64 pour cela:
J'espère que cela aide quelqu'un!
la source
Celui-ci semble impliquer que 030 et 031 sont des triangles de haut en bas.
(Comme l'a souligné Bobince, cela ne semble pas être une norme ASCII)
la source
J'utilise ▼ et ▲, mais ils pourraient ne pas fonctionner pour vous. J'utilise l'alt 11551 pour le premier et 11550 pour le second. Vous pouvez toujours les copier-coller si l'ascii n'est pas le même pour votre système.
la source
J'ai décidé que les symboles les plus populaires recommandés ici (▼ et ▲) sont trop gras, donc sur le site codepoints.net, recommandé par l'utilisateur ADJenks, j'ai trouvé ces symboles qui sont plus beaux à mon goût: 🞀 (U + 1F780) 🞁 (U + 1F781) 🞂 (U + 1F782) 🞃 (U + 1F783)
la source
Le site que j'aime utiliser pour cela est codepoints.net
Voici une recherche des mots «pointe de flèche» et «triangle»: https://codepoints.net/search?q=arrowhead+triangle
Il a des correspondances pour les "flèches à tête triangulaire" qui ont des tiges, mais ce ne sont que 4 petites pages à parcourir et il y a beaucoup de bonnes correspondances avec de jolis détails sur chaque personnage.
Il existe également un bloc de code pour "Symboles et flèches divers" et ce site Web les répertorie ici: https://codepoints.net/miscundry_symbols_and_arrows
la source
En voici un autre - ᐞ - Unicode U + 141E / CANADIAN SYLLABICS GLOTTAL STOP
la source