Codes de caractères HTML pour ce ▲ ou ce ▼

les grands et petits triangles noirs faisant face aux 4 directions peuvent être représentés ainsi:

▲ ▲

▴ alternate

▶ alternate

▸ alternate

► ►

▼ ▼

▾ alternate

◀ alternate

◂ փ

◄ alternate

vous n'avez pas besoin d'utiliser des codes de caractères; il suffit D'utiliser UTF-8 et de les mettre littéralement; comme ceci:

▲▼

Si vous devez absolument utiliser les entités, ils sont ▲ et ▼, respectivement.

il y a plusieurs façons correctes d'afficher un triangle pointant vers le bas et vers le haut.

Méthode 1: utiliser l'entité décimale HTML

HTML:

▲
▼

---

Méthode 2: utiliser entité HTML hexidécimale

HTML:

▲
▼

---

Méthode 3: Utiliser le caractère directement

HTML :

▲
▼

---

méthode 4: utiliser CSS

HTML:

<span class='icon-up'></span>
<span class='icon-down'></span>

CSS:

.icon-up:before {
    content: "B2";
}

.icon-down:before {
    content: "BC";
}

---

chacune de ces trois méthodes doit avoir le même résultat. Pour les autres symboles, les mêmes trois options existent. Certains ont même une quatrième option, vous permettant d'utiliser une référence basée sur une chaîne de caractères (par ex. ♥ to display pond).

You peut utiliser un site de référence comme Unicode-table.com pour trouver quelles icônes sont supportées en UNICODE et avec quels codes elles correspondent. Par exemple, vous trouverez les valeurs pour le triangle pointant vers le bas à http://unicode-table.com/en/25BC / .

notez que ces méthodes sont suffisantes seulement pour les icônes qui sont disponibles par défaut dans chaque navigateur. Pour des symboles comme ☃,❄,★,☂,☭,⎗ ou ⎘, c'est beaucoup moins susceptible d'être le cas. Bien qu'il soit possible de fournir un support de navigation croisée pour d'autres symboles UNICODE, la procédure est un peu plus compliquée.

si vous voulez savoir comment ajouter le support pour les caractères UNICODE moins communs, voir créer webfont avec les symboles de plan multilingues Unicode supplémentaires pour plus d'informations sur la façon de faire cela.

---

images d'arrière-plan

une stratégie totalement différente consiste à utiliser des images d'arrière-plan plutôt que des polices de caractères. Pour une performance optimale, il est préférable d'intégrer l'image dans votre fichier CSS en l'encodant, comme mentionné par exemple. @weasel5i2 et @Obsidian. Je recommande L'utilisation de SVG plutôt que GIF, cependant, c'est mieux pour la performance et pour la netteté de vos symboles.

ce code suivant est la version Base64 pour et SVG de l'icône :

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

Quand utiliser l'arrière-plan des images ou des polices

pour de nombreux cas D'utilisation, les images D'arrière-plan et les polices d'icône basées sur SVG sont largement équivalentes en termes de performances et de flexibilité. Pour décider lequel choisir, tenir compte des différences suivantes:

images SVG

• ils peuvent avoir plusieurs couleurs
• ils peuvent intégrer leur propre CSS et / ou être stylisés par le document HTML
• ils peuvent être chargés comme un fichier séparé, intégré dans CSS et intégré dans HTML
• chaque symbole est représenté par un code XML ou un code base64. Vous ne pouvez pas utiliser le caractère directement dans votre éditeur de code ou utiliser une entité HTML
• les utilisations multiples du même symbole impliquent la duplication du symbole lorsque le code XML est intégré dans le HTML. La Duplication n'est pas nécessaire lors de l'intégration du fichier dans le CSS ou de son chargement dans un fichier séparé
• vous ne pouvez pas utiliser color , font-size , line-height , background-color ou d'autres règles de style liées à la police pour changer l'affichage de votre icône, mais vous pouvez faire référence à différents composants de l'icône comme des formes individuellement.
• vous devez avoir une certaine connaissance de L'encodage SVG et/ou base64
• limitée ou non prise en charge dans les anciennes versions de IE

Icône polices

• une icône peut n'avoir qu'une couleur de remplissage, une couleur de fond, etc.
• une icône peut être intégrée dans CSS ou HTML. En HTML, vous pouvez utiliser le caractère directement ou utiliser une entité HTML pour le représenter.
• Certains symboles peuvent être affichés sans l'utilisation d'une webfont. La plupart des symboles ne le peuvent pas.
• les utilisations multiples du même symbole impliquent une duplication du symbole lorsque votre caractère est intégré au HTML. La Duplication n'est pas nécessaire lors de l'intégration du fichier dans la CSS.
• vous pouvez utiliser color , font-size , line-height , background-color ou d'autres règles de style liées à la police pour changer l'affichage de votre icône
• vous n'avez pas besoin de connaissances techniques spéciales
• prise en charge dans tous les principaux navigateurs, y compris les anciens versions de IE

personnellement, je recommande 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 à la couleur pour les polices.

le principal avantage d'utiliser SVG images est que vous pouvez donner différents composants d'un symbole de leur propre style. Si vous intégrez votre code XML SVG dans le document HTML, c'est très similaire au style HTML. Il en résulterait toutefois une page Web utilisant à 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 du bloat supplémentaire si le symbole est répété sur plusieurs pages et vous devez considérer que les anciennes versions D'IE n'ont pas ou peu de support pour SVG.

▲ est le triangle Unicode noir pointant vers le haut (▲) tandis que ▼ est le triangle noir pointant vers le bas (▼).

vous pouvez simplement brancher les caractères (copiés à partir du web) dans ce site pour une recherche.

vérifier cette page http://www.alanwood.net/unicode/geometric_shapes.html , la première est" 9650 ▲ 25B2 Black UP-POINTING TRIANGLE (present in WGL4) "et la deuxième"9660 ▼ 25BC black DOWN-POINTING TRIANGLE (present in WGL4)".