Caractère du triangle (flèche) haut/bas à afficher en HTML

Question

Je cherche un caractère HTML ou ASCII qui soit un triangle pointant vers le haut ou vers le bas afin de pouvoir l'utiliser comme un interrupteur à bascule.

J'ai trouvé ↑ ( ↑ ), et ↓ ( ↓ ) - mais ceux-ci ont une tige étroite. Je cherche juste la "tête" de la flèche HTML.

Answer 1

Les têtes de flèches Unicode :

• ▲ - U+25B2 TRIANGLE ASCENDANT NOIR
• ▼ - U+25BC TRIANGLE NOIR POINTANT VERS LE BAS
• ▴ - U+25B4 PETIT TRIANGLE NOIR POINTANT VERS LE HAUT
• ▾ - U+25BE PETIT TRIANGLE NOIR POINTANT VERS LE BAS

Utilice ▲ y ▼ 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. Il est préférable d'utiliser les grandes versions dans une police plus petite.

D'autres flèches Unicode sont disponibles sur le site :

• http://en.wikipedia.org/wiki/Arrow_%28symbol%29#Arrows_in_Unicode
• http://en.wikipedia.org/wiki/Geometric_Shapes
• http://tools.bioniccore.com/ascii/search/pointing

Enfin, ces flèches ne sont pas ASCII, y compris ↑ et ↓ : elles sont Unicode.

Answer 2

Pour les entités HTML
◄ = ◄
► = ►
▼ = ▼
▲ = ▲

Answer 3

OPTION 1 : FLÈCHES DE TRI DES COLONNES UNICODE

J'ai trouvé celui-ci très pratique pour un trieur de colonnes à un seul caractère. (Ça a l'air bon à l'échelle supérieure) .

⇕ = ⇕

---

Encore quelques flèches unicode.

Vous pouvez les copier directement de la page ci-dessous ou vous pouvez utiliser le code.

Chaque rangée de flèches est numérotée de gauche à droite :

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Il suffit d'insérer le chiffre/la lettre correspondant avant le point-virgule de fermeture comme ci-dessus.

---

ș

← ↑ → ↓ ↔ ↕ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟

---

Ț

↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↫ ↬ ↭ ↮ ↯

---

ț

↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿

---

Ȝ

⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏

---

ȝ

⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟

---

Ȟ

⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯

---

ȟ

⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿

---

OPTION 2 : CHEVRONS CSS PURS

J'ai récemment rédigé un article sur la création de chevrons de manière efficace en utilisant uniquement les CSS. (Aucune image requise).

Comment modifier simplement :

• ROTATION
• ÉPAISSEUR
• COULEUR
• TAILLE

---

>>> CLIQUEZ POUR LA DÉMO <<<

---

---

CSS (Efficace avec le support de plusieurs navigateurs)

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border below*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent;/*adjust size*/
}
.Chevron:before{
    top:0;/*adjust rotation, change 'top' not value: (top/right/bottom/left)*/
    border-top-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    top:-10px;/*adjust thickness ('top' must match rotation above)*/
    border-top-color:#fff;/*Match background colour*/
}

---

OPTION 3 : ICÔNES D'IMAGES CSS BASE64

HAUT/BAS

DOWN

UP

En utilisant seulement quelques lignes de css, nous pouvons encoder nos images en base64.

---

>>> CLIQUEZ POUR LA DÉMO <<<

---

PROS

• Il n'est pas nécessaire d'inclure des ressources supplémentaires sous forme d'images.
• Supporte la transparence alpha complète.
• Prise en charge complète des différents navigateurs.
• Les petites images/icônes peuvent être stockées dans une base de données.

CONS

• La mise à jour/édition peut devenir une corvée.
• Ne convient pas aux grandes images en raison de l'excès de code généré.

CSS

.sorting,
.sorting_asc,
.sorting_desc{
    padding:4px 21px 4px 4px;
    cursor:pointer;
}
.sorting{
    background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==) no-repeat center right;
}
.sorting_asc{
    background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==) no-repeat center right;
}
.sorting_desc{
    background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=) no-repeat center right;
}

Answer 4

Désolé mais ils ne sont qu'en Unicode :(

Des gros :

• 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 ▶)

De grands blancs :

• U+25B3 (Triangle blanc pointant vers le haut △)
• U+25BD (Triangle blanc pointant vers le bas ▽)
• U+25C1 (Triangle blanc pointant vers la gauche ◁)
• U+25B7 (Triangle blanc pointant vers la droite ▷)

Il y a aussi des triangles plus petits :

• 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 ▸)

Il y a aussi des blancs :

• 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 dans Wikipedia :
http://en.wikipedia.org/wiki/Geometric_Shapes

Mais malheureusement, ils sont tous Unicode au lieu d'ASCII. Si vous voulez quand même utiliser l'ASCII, vous pouvez utiliser un fichier image pour cela ou simplement utiliser ^ y v . ( Tout comme Google Maps dans la version mobile cela faisait référence à la anciennement mobile Google Maps)

Answer 5

Puisque vous utilisez ces flèches pour un interrupteur à bascule, vous pouvez envisager de créer ces flèches avec un élément html en utilisant les styles suivants au lieu des caractères unicode.

.upparrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
   border-bottom-color: #000;
}

.downarrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/