Codes de caractères HTML pour ce ▲ ou ce ▼
Quels sont les codes de caractères d'entité HTML pour cette flèche vers le haut (▲) et sa version chien orientée vers le bas (▼)?
J'utilise des GIF pour représenter ces flèches depuis que je ne connais pas leurs codes.
- ▲ est + 25B2 TRIANGLE DE POINTAGE NOIR et son entité de caractère décimal est
▲ - ▼ est + 25BC TRIANGLE POINT VERS LE BAS NOIR et son entité de caractère décimal est
▼
J'utilise habituellement l'excellent Gucharmap pour rechercher des caractères Unicode. Il est installé sur toutes les installations Linux récentes avec Gnome sous le nom "Character Map". Je ne connais aucun outil équivalent pour Windows ou Mac OS X, mais sa page d'accueil en répertorie quelques-uns.
Les grands et petits triangles noirs faisant face aux 4 directions peuvent être représentés ainsi:
▲ ▲
▴ ▴
▶ ▶
▸ ▸
► ►
▼ ▼
▾ ▾
◀ ◀
◂ ◂
◄ ◄
Il existe plusieurs façons correctes d'afficher un triangle pointant vers le bas et pointant vers le haut.
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:
<span class='icon-up'></span>
<span class='icon-down'></span>
CSS:
.icon-up:before {
content: "\25B2";
}
.icon-down:before {
content: "\25BC";
}
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 nicode-table.com pour trouver les icônes prises en charge dans UNICODE et les codes auxquels elles correspondent. avec. 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 voulez 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 du 
icône:
/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
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
- 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 en tant que fichier séparé, intégré en CSS ET intégré en 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
- Des utilisations multiples du même symbole impliquent la duplication du symbole lorsque le code XML est incorporé dans le HTML. La duplication n'est pas requise lors de l'incorporation du fichier dans le CSS ou du chargement en tant que fichier séparé
- Vous ne pouvez pas utiliser
color,font-size,line-height,background-colorou d'autres règles de style liées aux polices pour modifier l'affichage de votre icône, mais vous pouvez référencer différents composants de l'icône sous forme de formes individuellement. - Vous avez besoin d'une certaine connaissance du codage SVG et/ou base64
- Prise en charge limitée ou inexistante dans les anciennes versions d'IE
Polices d'icônes
- Une icône ne peut avoir qu'une couleur de remplissage, une couleur d'arrière-plan, etc.
- Une icône peut être intégrée au CSS ou au 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 utiliser de police Web. La plupart des symboles ne le peuvent pas.
- Plusieurs utilisations du même symbole impliquent la duplication du symbole lorsque votre personnage est intégré dans le HTML. La duplication n'est pas requise lors de l'incorporation du fichier dans le CSS.
- Vous pouvez utiliser
color,font-size,line-height,background-colorou d'autres règles de style liées à la police pour modifier l'affichage de votre icône - Vous n'avez besoin d'aucune connaissance technique particulière
- Prise en charge dans tous les principaux navigateurs, y compris les anciennes versions d'IE
Personnellement, je recommanderais l'utilisation d'images d'arrière-plan uniquement lorsque vous avez besoin de plusieurs couleurs et que cette couleur ne peut pas être obtenue 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 considérer que les anciennes versions de IE n'ont pas ou peu de prise en charge pour SVG.
Vous n'avez pas besoin d'utiliser des codes de caractères; utilisez simplement UTF-8 et mettez-les littéralement; ainsi:
▲▼
Si vous devez absolument utiliser les entites, ce sont # x25b2; et # x25bc ;, respectivement.
▲ est le triangle noir pointant vers le haut Unicode (▲) 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.
Consultez cette page http://www.alanwood.net/unicode/geometric_shapes.html , le premier est "9650 ▲ 25B2 BLACK UP-POINTING TRIANGLE (présent dans WGL4)" et le 2ème "9660 ▼ 25BC BLACK TRIANGLE DE POINTAGE VERS LE BAS (présent dans WGL4) ".