Question Quels caractères peuvent être utilisés pour le triangle haut / bas (flèche sans tige) pour l'affichage en HTML?


je recherche un HTML ou ASCII caractère qui est un triangle pointant vers le haut ou vers le bas de sorte que je peux l'utiliser comme un interrupteur à bascule.

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


1111
2018-04-23 18:51


origine


Réponses:


Têtes de flèches Unicode:

  • ▲ - TRIANGLE UP-POINTING NOIR U + 25B2
  • ▼ - U + 25BC TRIANGLE DE POINTAGE NOIR NOIR
  • TRI - U + 25B4 PETIT TRIANGLE DE POINTAGE NOIR
  • TRI - U + 25BE PETIT TRIANGLE DE POINTAGE NOIR

Pour ▲ et ▼ utiliser ▲ et ▼ respectivement si vous ne pouvez pas inclure de caractères Unicode directement (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 en caractères plus petits.

Plus de flèches Unicode sont à:

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


1475
2018-04-23 18:57



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


648
2018-05-02 06:15



OPTION 1: COLONNE UNICODE TRIER LES FLÈCHES

J'ai trouvé celui-ci très pratique pour un trieur de colonnes à un caractère. (Il a l'air bien upscalé).

⇕ = ⇕

Unicode table column sort arrows

NOTE IMPORTANTE  (Lors de l'utilisation de symboles Unicode)

Le support Unicode varie en fonction du symbole de choix, du navigateur et de la famille de polices. Si vous trouvez que le symbole que vous avez choisi ne fonctionne pas dans certains navigateurs, essayez d'utiliser une autre famille de polices. Microsoft recommande "Segoe UI Symbol" Cependant, il serait sage d'inclure la police avec votre site Web car peu de gens l'ont sur leurs ordinateurs.

Ouvrez cette page dans d'autres navigateurs pour voir quels symboles sont affichés avec la police par défaut.


Quelques flèches plus unicode.

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:

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

Insérez simplement le numéro / lettre correspondant avant le point-virgule de fermeture comme ci-dessus.


ș

← ↑ → ↓ ↚ ↛ ↜ ↝ ↞ ↟


Ț

↠ ↡ ↢ ↤ ↥ ↦ ↧ ↧ ↭ ↭ ↮ ↯


ț

↰ ↱ ↲ ↴ ↵ ↷ ↸ ↸ ↹ ↹ ↼ ↽ ↽ ↾ ↿


Ȝ

⇀ ⇁ ⇂ ⇄ ⇅ ⇇ ⇈ ⇈ ⇉ ⇉ ⇌ ⇍ ⇍ ⇎ ⇏


ȝ

⇐ ⇑ ⇒ ⇓ ⇓ ⇗ ⇘ ⇙ ⇙ ⇝ ⇝ ⇞ ⇞ ⇟


Ȟ

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


ȟ

     ⇰ ⇱ ⇲ ⇴ ⇵ ⇷ ⇸ ⇸ ⇹ ⇹ ⇼ ⇽ ⇽ ⇾ ⇿


Symboles Unicode HTML supplémentaires

Une liste sélectionnée d'autres icônes / symboles Unicode utiles.

U+2302  ⌂   HOUSE
U+2303  ⌃   UP ARROWHEAD
U+2304  ⌄   DOWN ARROWHEAD
U+2305  ⌅   PROJECTIVE
U+2306  ⌆   PERSPECTIVE
U+2307  ⌇   WAVY LINE
U+2315  ⌕   TELEPHONE RECORDER
U+2316  ⌖   POSITION INDICATOR
U+2317  ⌗   VIEWDATA SQUARE
U+2318  ⌘   PLACE OF INTEREST SIGN
U+231A     WATCH
U+231B     HOURGLASS
U+2326  ⌦   ERASE TO THE RIGHT
U+2327  ⌧   X IN A RECTANGLE BOX
U+2328     KEYBOARD
U+2329  〈   LEFT-POINTING ANGLE BRACKET
U+232A  〉   RIGHT-POINTING ANGLE BRACKET
U+232B  ⌫   ERASE TO THE LEFT
U+23E9     BLACK RIGHT-POINTING DOUBLE TRIANGLE
U+23EA     BLACK LEFT-POINTING DOUBLE TRIANGLE
U+23EB     BLACK UP-POINTING DOUBLE TRIANGLE
U+23EC     BLACK DOWN-POINTING DOUBLE TRIANGLE
U+23ED     BLACK RIGHT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR
U+23EE     BLACK LEFT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR
U+23EF     BLACK RIGHT-POINTING TRIANGLE WITH DOUBLE VERTICAL BAR
U+23F0     ALARM CLOCK
U+23F1     STOPWATCH
U+23F2     TIMER CLOCK
U+23F3     HOURGLASS WITH FLOWING SAND
U+2600     BLACK SUN WITH RAYS
U+2601     CLOUD
U+2602     UMBRELLA
U+2603     SNOWMAN
U+2604     COMET
U+2605  ★   BLACK STAR
U+2606  ☆   WHITE STAR
U+2607  ☇   LIGHTNING
U+2608  ☈   THUNDERSTORM
U+2609  ☉   SUN
U+260A  ☊   ASCENDING NODE
U+260B  ☋   DESCENDING NODE
U+260C  ☌   CONJUNCTION
U+260D  ☍   OPPOSITION
U+260E     BLACK TELEPHONE
U+260F  ☏   WHITE TELEPHONE
U+2610  ☐   BALLOT BOX
U+2611     BALLOT BOX WITH CHECK
U+2612  ☒   BALLOT BOX WITH X
U+2613  ☓   SALTIRE
U+2614     UMBRELLA WITH RAIN DROPS
U+2615     HOT BEVERAGE
U+2616  ☖   WHITE SHOGI PIECE
U+2617  ☗   BLACK SHOGI PIECE
U+2618     SHAMROCK
U+2619  ☙   REVERSED ROTATED FLORAL HEART BULLET
U+261A  ☚   BLACK LEFT POINTING INDEX
U+261B  ☛   BLACK RIGHT POINTING INDEX
U+261C  ☜   WHITE LEFT POINTING INDEX
U+261D     WHITE UP POINTING INDEX
U+261E  ☞   WHITE RIGHT POINTING INDEX
U+261F  ☟   WHITE DOWN POINTING INDEX
U+2620     SKULL AND CROSSBONES
U+2621  ☡   CAUTION SIGN
U+2622     RADIOACTIVE SIGN
U+2623     BIOHAZARD SIGN
U+262A     STAR AND CRESCENT
U+262B  ☫   FARSI SYMBOL
U+262C  ☬   ADI SHAKTI
U+262D  ☭   HAMMER AND SICKLE
U+262E     PEACE SYMBOL
U+262F     YIN YANG
U+2638     WHEEL OF DHARMA
U+2639     WHITE FROWNING FACE
U+263A     WHITE SMILING FACE
U+263B  ☻   BLACK SMILING FACE
U+263C  ☼   WHITE SUN WITH RAYS
U+263D  ☽   FIRST QUARTER MOON
U+263E  ☾   LAST QUARTER MOON
U+263F  ☿   MERCURY
U+2640     FEMALE SIGN
U+2641  ♁   EARTH
U+2642     MALE SIGN
U+2643  ♃   JUPITER
U+2644  ♄   SATURN
U+2645  ♅   URANUS
U+2646  ♆   NEPTUNE
U+2647  ♇   PLUTO
U+2648     ARIES
U+2649     TAURUS
U+264A     GEMINI
U+264B     CANCER
U+264C     LEO
U+264D     VIRGO
U+264E     LIBRA
U+264F     SCORPIUS
U+2650     SAGITTARIUS
U+2651     CAPRICORN
U+2652     AQUARIUS
U+2653     PISCES
U+2654  ♔   WHITE CHESS KING
U+2655  ♕   WHITE CHESS QUEEN
U+2656  ♖   WHITE CHESS ROOK
U+2657  ♗   WHITE CHESS BISHOP
U+2658  ♘   WHITE CHESS KNIGHT
U+2659  ♙   WHITE CHESS PAWN
U+265A  ♚   BLACK CHESS KING
U+265B  ♛   BLACK CHESS QUEEN
U+265C  ♜   BLACK CHESS ROOK
U+265D  ♝   BLACK CHESS BISHOP
U+265E  ♞   BLACK CHESS KNIGHT
U+265F  ♟   BLACK CHESS PAWN
U+2660     BLACK SPADE SUIT
U+2661  ♡   WHITE HEART SUIT
U+2662  ♢   WHITE DIAMOND SUIT
U+2663     BLACK CLUB SUIT
U+2664  ♤   WHITE SPADE SUIT
U+2665     BLACK HEART SUIT
U+2666     BLACK DIAMOND SUIT
U+2667  ♧   WHITE CLUB SUIT
U+2668     HOT SPRINGS
U+2669  ♩   QUARTER NOTE
U+266A  ♪   EIGHTH NOTE
U+266B  ♫   BEAMED EIGHTH NOTES
U+266C  ♬   BEAMED SIXTEENTH NOTES
U+266D  ♭   MUSIC FLAT SIGN
U+266E  ♮   MUSIC NATURAL SIGN
U+266F  ♯   MUSIC SHARP SIGN
U+267A  ♺   RECYCLING SYMBOL FOR GENERIC MATERIALS
U+267B     BLACK UNIVERSAL RECYCLING SYMBOL
U+267C  ♼   RECYCLED PAPER SYMBOL
U+267D  ♽   PARTIALLY-RECYCLED PAPER SYMBOL
U+267E  ♾   PERMANENT PAPER SIGN
U+267F     WHEELCHAIR SYMBOL
U+2680  ⚀   DIE FACE-1
U+2681  ⚁   DIE FACE-2
U+2682  ⚂   DIE FACE-3
U+2683  ⚃   DIE FACE-4
U+2684  ⚄   DIE FACE-5
U+2685  ⚅   DIE FACE-6
U+2686  ⚆   WHITE CIRCLE WITH DOT RIGHT
U+2687  ⚇   WHITE CIRCLE WITH TWO DOTS
U+2688  ⚈   BLACK CIRCLE WITH WHITE DOT RIGHT
U+2689  ⚉   BLACK CIRCLE WITH TWO WHITE DOTS
U+268A  ⚊   MONOGRAM FOR YANG
U+268B  ⚋   MONOGRAM FOR YIN
U+268C  ⚌   DIGRAM FOR GREATER YANG
U+268D  ⚍   DIGRAM FOR LESSER YIN
U+268E  ⚎   DIGRAM FOR LESSER YANG
U+268F  ⚏   DIGRAM FOR GREATER YIN
U+2690  ⚐   WHITE FLAG
U+2691  ⚑   BLACK FLAG
U+2692     HAMMER AND PICK
U+2693     ANCHOR
U+2694     CROSSED SWORDS
U+2695     STAFF OF AESCULAPIUS
U+2696     SCALES
U+2697     ALEMBIC
U+2698  ⚘   FLOWER
U+2699     GEAR
U+269A  ⚚   STAFF OF HERMES
U+269B     ATOM SYMBOL
U+269C     FLEUR-DE-LIS
U+269D  ⚝   OUTLINED WHITE STAR
U+269E  ⚞   THREE LINES CONVERGING RIGHT
U+269F  ⚟   THREE LINES CONVERGING LEFT
U+26A0     WARNING SIGN
U+26A1     HIGH VOLTAGE SIGN
U+26A2  ⚢   DOUBLED FEMALE SIGN
U+26A3  ⚣   DOUBLED MALE SIGN
U+26A4  ⚤   INTERLOCKED FEMALE AND MALE SIGN
U+26A5  ⚥   MALE AND FEMALE SIGN
U+26A6  ⚦   MALE WITH STROKE SIGN
U+26A7  ⚧   MALE WITH STROKE AND MALE AND FEMALE SIGN
U+26A8  ⚨   VERTICAL MALE WITH STROKE SIGN
U+26A9  ⚩   HORIZONTAL MALE WITH STROKE SIGN
U+26AA     MEDIUM WHITE CIRCLE
U+26AB     MEDIUM BLACK CIRCLE
U+26BD     SOCCER BALL
U+26BE     BASEBALL
U+26BF  ⚿   SQUARED KEY
U+26C0  ⛀   WHITE DRAUGHTS MAN
U+26C1  ⛁   WHITE DRAUGHTS KING
U+26C2  ⛂   BLACK DRAUGHTS MAN
U+26C3  ⛃   BLACK DRAUGHTS KING
U+26C4     SNOWMAN WITHOUT SNOW
U+26C5     SUN BEHIND CLOUD
U+26C6  ⛆   RAIN
U+26C7  ⛇   BLACK SNOWMAN
U+26C8     THUNDER CLOUD AND RAIN
U+26C9  ⛉   TURNED WHITE SHOGI PIECE
U+26CA  ⛊   TURNED BLACK SHOGI PIECE
U+26CB  ⛋   WHITE DIAMOND IN SQUARE
U+26CC  ⛌   CROSSING LANES
U+26CD  ⛍   DISABLED CAR
U+26CE     OPHIUCHUS
U+26CF     PICK
U+26D0  ⛐   CAR SLIDING
U+26D1     HELMET WITH WHITE CROSS
U+26D2  ⛒   CIRCLED CROSSING LANES
U+26D3     CHAINS
U+26D4     NO ENTRY
U+26D5  ⛕   ALTERNATE ONE-WAY LEFT WAY TRAFFIC
U+26D6  ⛖   BLACK TWO-WAY LEFT WAY TRAFFIC
U+26D7  ⛗   WHITE TWO-WAY LEFT WAY TRAFFIC
U+26D8  ⛘   BLACK LEFT LANE MERGE
U+26D9  ⛙   WHITE LEFT LANE MERGE
U+26DA  ⛚   DRIVE SLOW SIGN
U+26DB  ⛛   HEAVY WHITE DOWN-POINTING TRIANGLE
U+26DC  ⛜   LEFT CLOSED ENTRY
U+26DD  ⛝   SQUARED SALTIRE
U+26DE  ⛞   FALLING DIAGONAL IN WHITE CIRCLE IN BLACK SQUARE
U+26DF  ⛟   BLACK TRUCK
U+26E0  ⛠   RESTRICTED LEFT ENTRY-1
U+26E1  ⛡   RESTRICTED LEFT ENTRY-2
U+26E2  ⛢   ASTRONOMICAL SYMBOL FOR URANUS
U+26E3  ⛣   HEAVY CIRCLE WITH STROKE AND TWO DOTS ABOVE
U+26E4  ⛤   PENTAGRAM
U+26E5  ⛥   RIGHT-HANDED INTERLACED PENTAGRAM
U+26E6  ⛦   LEFT-HANDED INTERLACED PENTAGRAM
U+26E7  ⛧   INVERTED PENTAGRAM
U+26E8  ⛨   BLACK CROSS ON SHIELD
U+26E9     SHINTO SHRINE
U+26EA     CHURCH
U+26EB  ⛫   CASTLE
U+26EC  ⛬   HISTORIC SITE
U+26ED  ⛭   GEAR WITHOUT HUB
U+26EE  ⛮   GEAR WITH HANDLES
U+26EF  ⛯   MAP SYMBOL FOR LIGHTHOUSE
U+26F0     MOUNTAIN
U+26F1     UMBRELLA ON GROUND
U+26F2     FOUNTAIN
U+26F3     FLAG IN HOLE
U+26F4     FERRY
U+26F5     SAILBOAT
U+26F6  ⛶   SQUARE FOUR CORNERS
U+26F7     SKIER
U+26F8     ICE SKATE
U+26F9     PERSON WITH BALL
U+26FA     TENT
U+26FD     FUEL PUMP
U+26FE  ⛾   CUP ON BLACK SQUARE
U+26FF  ⛿   WHITE FLAG WITH HORIZONTAL MIDDLE BLACK STRIPE
U+2701  ✁   UPPER BLADE SCISSORS
U+2702     BLACK SCISSORS
U+2703  ✃   LOWER BLADE SCISSORS
U+2704  ✄   WHITE SCISSORS
U+2705     WHITE HEAVY CHECK MARK
U+2706  ✆   TELEPHONE LOCATION SIGN
U+2707  ✇   TAPE DRIVE
U+2708     AIRPLANE
U+2709     ENVELOPE
U+270A     RAISED FIST
U+270B     RAISED HAND
U+270C     VICTORY HAND
U+270D     WRITING HAND
U+270E  ✎   LOWER RIGHT PENCIL
U+270F     PENCIL
U+2710  ✐   UPPER RIGHT PENCIL
U+2711  ✑   WHITE NIB
U+2712     BLACK NIB
U+2713  ✓   CHECK MARK
U+2714     HEAVY CHECK MARK
U+2715  ✕   MULTIPLICATION X
U+2716     HEAVY MULTIPLICATION X
U+2717  ✗   BALLOT X
U+2718  ✘   HEAVY BALLOT X
U+2719  ✙   OUTLINED GREEK CROSS
U+271A  ✚   HEAVY GREEK CROSS
U+271B  ✛   OPEN CENTRE CROSS
U+271C  ✜   HEAVY OPEN CENTRE CROSS
U+271D     LATIN CROSS
U+271E  ✞   SHADOWED WHITE LATIN CROSS
U+271F  ✟   OUTLINED LATIN CROSS
U+2720  ✠   MALTESE CROSS
U+2721     STAR OF DAVID
U+2722  ✢   FOUR TEARDROP-SPOKED ASTERISK
U+2723  ✣   FOUR BALLOON-SPOKED ASTERISK
U+2724  ✤   HEAVY FOUR BALLOON-SPOKED ASTERISK
U+2725  ✥   FOUR CLUB-SPOKED ASTERISK
U+2726  ✦   BLACK FOUR POINTED STAR
U+2727  ✧   WHITE FOUR POINTED STAR
U+2728     SPARKLES
U+2729  ✩   STRESS OUTLINED WHITE STAR
U+272A  ✪   CIRCLED WHITE STAR
U+272B  ✫   OPEN CENTRE BLACK STAR
U+272C  ✬   BLACK CENTRE WHITE STAR
U+272D  ✭   OUTLINED BLACK STAR
U+272E  ✮   HEAVY OUTLINED BLACK STAR
U+272F  ✯   PINWHEEL STAR
U+2730  ✰   SHADOWED WHITE STAR
U+2731  ✱   HEAVY ASTERISK
U+2732  ✲   OPEN CENTRE ASTERISK
U+2733     EIGHT SPOKED ASTERISK
U+2734     EIGHT POINTED BLACK STAR
U+2735  ✵   EIGHT POINTED PINWHEEL STAR
U+2736  ✶   SIX POINTED BLACK STAR
U+2737  ✷   EIGHT POINTED RECTILINEAR BLACK STAR
U+2738  ✸   HEAVY EIGHT POINTED RECTILINEAR BLACK STAR
U+2739  ✹   TWELVE POINTED BLACK STAR
U+273A  ✺   SIXTEEN POINTED ASTERISK
U+273B  ✻   TEARDROP-SPOKED ASTERISK
U+273C  ✼   OPEN CENTRE TEARDROP-SPOKED ASTERISK
U+273D  ✽   HEAVY TEARDROP-SPOKED ASTERISK
U+273E  ✾   SIX PETALLED BLACK AND WHITE FLORETTE
U+273F  ✿   BLACK FLORETTE
U+2740  ❀   WHITE FLORETTE
U+2741  ❁   EIGHT PETALLED OUTLINED BLACK FLORETTE
U+2742  ❂   CIRCLED OPEN CENTRE EIGHT POINTED STAR
U+2743  ❃   HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK
U+2744     SNOWFLAKE
U+2745  ❅   TIGHT TRIFOLIATE SNOWFLAKE
U+2746  ❆   HEAVY CHEVRON SNOWFLAKE
U+2747     SPARKLE
U+2748  ❈   HEAVY SPARKLE
U+2749  ❉   BALLOON-SPOKED ASTERISK
U+274A  ❊   EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+274B  ❋   HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+274C     CROSS MARK
U+274D  ❍   SHADOWED WHITE CIRCLE
U+274E     NEGATIVE SQUARED CROSS MARK
U+2753     BLACK QUESTION MARK ORNAMENT
U+2754     WHITE QUESTION MARK ORNAMENT
U+2755     WHITE EXCLAMATION MARK ORNAMENT
U+2756  ❖   BLACK DIAMOND MINUS WHITE X
U+2757     HEAVY EXCLAMATION MARK SYMBOL
U+275B  ❛   HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT
U+275C  ❜   HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT
U+275D  ❝   HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT
U+275E  ❞   HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT
U+275F  ❟   HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
U+2760  ❠   HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
U+2761  ❡   CURVED STEM PARAGRAPH SIGN ORNAMENT
U+2762  ❢   HEAVY EXCLAMATION MARK ORNAMENT
U+2763     HEAVY HEART EXCLAMATION MARK ORNAMENT
U+2764     HEAVY BLACK HEART
U+2765  ❥   ROTATED HEAVY BLACK HEART BULLET
U+2766  ❦   FLORAL HEART
U+2767  ❧   ROTATED FLORAL HEART BULLET
U+276C  ❬   MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT
U+276D  ❭   MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT
U+276E  ❮   HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT
U+276F  ❯   HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT
U+2770  ❰   HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT
U+2771  ❱   HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT
U+2794  ➔   HEAVY WIDE-HEADED RIGHTWARDS ARROW
U+2795     HEAVY PLUS SIGN
U+2796     HEAVY MINUS SIGN
U+2797     HEAVY DIVISION SIGN
U+2798  ➘   HEAVY SOUTH EAST ARROW
U+2799  ➙   HEAVY RIGHTWARDS ARROW
U+279A  ➚   HEAVY NORTH EAST ARROW
U+279B  ➛   DRAFTING POINT RIGHTWARDS ARROW
U+279C  ➜   HEAVY ROUND-TIPPED RIGHTWARDS ARROW
U+279D  ➝   TRIANGLE-HEADED RIGHTWARDS ARROW
U+279E  ➞   HEAVY TRIANGLE-HEADED RIGHTWARDS ARROW
U+279F  ➟   DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
U+27A0  ➠   HEAVY DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
U+27A1     BLACK RIGHTWARDS ARROW
U+27A2  ➢   THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD
U+27A3  ➣   THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD
U+27A4  ➤   BLACK RIGHTWARDS ARROWHEAD
U+27A5  ➥   HEAVY BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW
U+27A6  ➦   HEAVY BLACK CURVED UPWARDS AND RIGHTWARDS ARROW
U+27A7  ➧   SQUAT BLACK RIGHTWARDS ARROW
U+27A8  ➨   HEAVY CONCAVE-POINTED BLACK RIGHTWARDS ARROW
U+27A9  ➩   RIGHT-SHADED WHITE RIGHTWARDS ARROW
U+27AA  ➪   LEFT-SHADED WHITE RIGHTWARDS ARROW
U+27AB  ➫   BACK-TILTED SHADOWED WHITE RIGHTWARDS ARROW
U+27AC  ➬   FRONT-TILTED SHADOWED WHITE RIGHTWARDS ARROW
U+27AD  ➭   HEAVY LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27AE  ➮   HEAVY UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27AF  ➯   NOTCHED LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27B0     CURLY LOOP
U+27B1  ➱   NOTCHED UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27B2  ➲   CIRCLED HEAVY WHITE RIGHTWARDS ARROW
U+27B3  ➳   WHITE-FEATHERED RIGHTWARDS ARROW
U+27B4  ➴   BLACK-FEATHERED SOUTH EAST ARROW
U+27B5  ➵   BLACK-FEATHERED RIGHTWARDS ARROW
U+27B6  ➶   BLACK-FEATHERED NORTH EAST ARROW
U+27B7  ➷   HEAVY BLACK-FEATHERED SOUTH EAST ARROW
U+27B8  ➸   HEAVY BLACK-FEATHERED RIGHTWARDS ARROW
U+27B9  ➹   HEAVY BLACK-FEATHERED NORTH EAST ARROW
U+27BA  ➺   TEARDROP-BARBED RIGHTWARDS ARROW
U+27BB  ➻   HEAVY TEARDROP-SHANKED RIGHTWARDS ARROW
U+27BC  ➼   WEDGE-TAILED RIGHTWARDS ARROW
U+27BD  ➽   HEAVY WEDGE-TAILED RIGHTWARDS ARROW
U+27BE  ➾   OPEN-OUTLINED RIGHTWARDS ARROW
U+27C0  ⟀   THREE DIMENSIONAL ANGLE
U+27E8  ⟨   MATHEMATICAL LEFT ANGLE BRACKET
U+27E9  ⟩   MATHEMATICAL RIGHT ANGLE BRACKET
U+27EA  ⟪   MATHEMATICAL LEFT DOUBLE ANGLE BRACKET
U+27EB  ⟫   MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET
U+27F0  ⟰   UPWARDS QUADRUPLE ARROW
U+27F1  ⟱   DOWNWARDS QUADRUPLE ARROW
U+27F2  ⟲   ANTICLOCKWISE GAPPED CIRCLE ARROW
U+27F3  ⟳   CLOCKWISE GAPPED CIRCLE ARROW
U+27F4  ⟴   RIGHT ARROW WITH CIRCLED PLUS
U+27F5  ⟵   LONG LEFTWARDS ARROW
U+27F6  ⟶   LONG RIGHTWARDS ARROW
U+27F7  ⟷   LONG LEFT RIGHT ARROW
U+27F8  ⟸   LONG LEFTWARDS DOUBLE ARROW
U+27F9  ⟹   LONG RIGHTWARDS DOUBLE ARROW
U+27FA  ⟺   LONG LEFT RIGHT DOUBLE ARROW
U+27FB  ⟻   LONG LEFTWARDS ARROW FROM BAR
U+27FC  ⟼   LONG RIGHTWARDS ARROW FROM BAR
U+27FD  ⟽   LONG LEFTWARDS DOUBLE ARROW FROM BAR
U+27FE  ⟾   LONG RIGHTWARDS DOUBLE ARROW FROM BAR
U+27FF  ⟿   LONG RIGHTWARDS SQUIGGLE ARROW
U+2900  ⤀   RIGHTWARDS TWO-HEADED ARROW WITH VERTICAL STROKE
U+2901  ⤁   RIGHTWARDS TWO-HEADED ARROW WITH DOUBLE VERTICAL STROKE
U+2902  ⤂   LEFTWARDS DOUBLE ARROW WITH VERTICAL STROKE
U+2903  ⤃   RIGHTWARDS DOUBLE ARROW WITH VERTICAL STROKE
U+2904  ⤄   LEFT RIGHT DOUBLE ARROW WITH VERTICAL STROKE
U+2905  ⤅   RIGHTWARDS TWO-HEADED ARROW FROM BAR
U+2906  ⤆   LEFTWARDS DOUBLE ARROW FROM BAR
U+2907  ⤇   RIGHTWARDS DOUBLE ARROW FROM BAR
U+2908  ⤈   DOWNWARDS ARROW WITH HORIZONTAL STROKE
U+2909  ⤉   UPWARDS ARROW WITH HORIZONTAL STROKE
U+290A  ⤊   UPWARDS TRIPLE ARROW
U+290B  ⤋   DOWNWARDS TRIPLE ARROW
U+290C  ⤌   LEFTWARDS DOUBLE DASH ARROW
U+290D  ⤍   RIGHTWARDS DOUBLE DASH ARROW
U+290E  ⤎   LEFTWARDS TRIPLE DASH ARROW
U+290F  ⤏   RIGHTWARDS TRIPLE DASH ARROW
U+2910  ⤐   RIGHTWARDS TWO-HEADED TRIPLE DASH ARROW
U+2911  ⤑   RIGHTWARDS ARROW WITH DOTTED STEM
U+2912  ⤒   UPWARDS ARROW TO BAR
U+2913  ⤓   DOWNWARDS ARROW TO BAR
U+2914  ⤔   RIGHTWARDS ARROW WITH TAIL WITH VERTICAL STROKE
U+2915  ⤕   RIGHTWARDS ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2916  ⤖   RIGHTWARDS TWO-HEADED ARROW WITH TAIL
U+2917  ⤗   RIGHTWARDS TWO-HEADED ARROW WITH TAIL WITH VERTICAL STROKE
U+2918  ⤘   RIGHTWARDS TWO-HEADED ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2919  ⤙   LEFTWARDS ARROW-TAIL
U+291A  ⤚   RIGHTWARDS ARROW-TAIL
U+291B  ⤛   LEFTWARDS DOUBLE ARROW-TAIL
U+291C  ⤜   RIGHTWARDS DOUBLE ARROW-TAIL
U+291D  ⤝   LEFTWARDS ARROW TO BLACK DIAMOND
U+291E  ⤞   RIGHTWARDS ARROW TO BLACK DIAMOND
U+291F  ⤟   LEFTWARDS ARROW FROM BAR TO BLACK DIAMOND
U+2920  ⤠   RIGHTWARDS ARROW FROM BAR TO BLACK DIAMOND
U+2921  ⤡   NORTH WEST AND SOUTH EAST ARROW
U+2922  ⤢   NORTH EAST AND SOUTH WEST ARROW
U+2923  ⤣   NORTH WEST ARROW WITH HOOK
U+2924  ⤤   NORTH EAST ARROW WITH HOOK
U+2925  ⤥   SOUTH EAST ARROW WITH HOOK
U+2926  ⤦   SOUTH WEST ARROW WITH HOOK
U+2927  ⤧   NORTH WEST ARROW AND NORTH EAST ARROW
U+2928  ⤨   NORTH EAST ARROW AND SOUTH EAST ARROW
U+2929  ⤩   SOUTH EAST ARROW AND SOUTH WEST ARROW
U+292A  ⤪   SOUTH WEST ARROW AND NORTH WEST ARROW
U+292B  ⤫   RISING DIAGONAL CROSSING FALLING DIAGONAL
U+292C  ⤬   FALLING DIAGONAL CROSSING RISING DIAGONAL
U+292D  ⤭   SOUTH EAST ARROW CROSSING NORTH EAST ARROW
U+292E  ⤮   NORTH EAST ARROW CROSSING SOUTH EAST ARROW
U+292F  ⤯   FALLING DIAGONAL CROSSING NORTH EAST ARROW
U+2930  ⤰   RISING DIAGONAL CROSSING SOUTH EAST ARROW
U+2931  ⤱   NORTH EAST ARROW CROSSING NORTH WEST ARROW
U+2932  ⤲   NORTH WEST ARROW CROSSING NORTH EAST ARROW
U+2933  ⤳   WAVE ARROW POINTING DIRECTLY RIGHT
U+2934     ARROW POINTING RIGHTWARDS THEN CURVING UPWARDS
U+2935     ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS
U+2936  ⤶   ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS
U+2937  ⤷   ARROW POINTING DOWNWARDS THEN CURVING RIGHTWARDS
U+2938  ⤸   RIGHT-SIDE ARC CLOCKWISE ARROW
U+2939  ⤹   LEFT-SIDE ARC ANTICLOCKWISE ARROW
U+293A  ⤺   TOP ARC ANTICLOCKWISE ARROW
U+293B  ⤻   BOTTOM ARC ANTICLOCKWISE ARROW
U+293C  ⤼   TOP ARC CLOCKWISE ARROW WITH MINUS
U+293D  ⤽   TOP ARC ANTICLOCKWISE ARROW WITH PLUS
U+293E  ⤾   LOWER RIGHT SEMICIRCULAR CLOCKWISE ARROW
U+293F  ⤿   LOWER LEFT SEMICIRCULAR ANTICLOCKWISE ARROW
U+2940  ⥀   ANTICLOCKWISE CLOSED CIRCLE ARROW
U+2941  ⥁   CLOCKWISE CLOSED CIRCLE ARROW
U+2942  ⥂   RIGHTWARDS ARROW ABOVE SHORT LEFTWARDS ARROW
U+2943  ⥃   LEFTWARDS ARROW ABOVE SHORT RIGHTWARDS ARROW
U+2944  ⥄   SHORT RIGHTWARDS ARROW ABOVE LEFTWARDS ARROW
U+2945  ⥅   RIGHTWARDS ARROW WITH PLUS BELOW
U+2946  ⥆   LEFTWARDS ARROW WITH PLUS BELOW
U+2962  ⥢   LEFTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB DOWN
U+2963  ⥣   UPWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
U+2964  ⥤   RIGHTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
U+2965  ⥥   DOWNWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
U+2966  ⥦   LEFTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB UP
U+2967  ⥧   LEFTWARDS HARPOON WITH BARB DOWN ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
U+2968  ⥨   RIGHTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB UP
U+2969  ⥩   RIGHTWARDS HARPOON WITH BARB DOWN ABOVE LEFTWARDS HARPOON WITH BARB DOWN
U+296A  ⥪   LEFTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
U+296B  ⥫   LEFTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
U+296C  ⥬   RIGHTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
U+296D  ⥭   RIGHTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
U+296E  ⥮   UPWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
U+296F  ⥯   DOWNWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
U+2989  ⦉   Z NOTATION LEFT BINDING BRACKET
U+298A  ⦊   Z NOTATION RIGHT BINDING BRACKET
U+2991  ⦑   LEFT ANGLE BRACKET WITH DOT
U+2992  ⦒   RIGHT ANGLE BRACKET WITH DOT
U+2993  ⦓   LEFT ARC LESS-THAN BRACKET
U+2994  ⦔   RIGHT ARC GREATER-THAN BRACKET
U+2995  ⦕   DOUBLE LEFT ARC GREATER-THAN BRACKET
U+2996  ⦖   DOUBLE RIGHT ARC LESS-THAN BRACKET
U+29A8  ⦨   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND RIGHT
U+29A9  ⦩   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND LEFT
U+29AA  ⦪   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND RIGHT
U+29AB  ⦫   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND LEFT
U+29AC  ⦬   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND UP
U+29AD  ⦭   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND UP
U+29AE  ⦮   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND DOWN
U+29AF  ⦯   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND DOWN
U+29BE  ⦾   CIRCLED WHITE BULLET
U+29BF  ⦿   CIRCLED BULLET
U+29C9  ⧉   TWO JOINED SQUARES
U+29CE  ⧎   RIGHT TRIANGLE ABOVE LEFT TRIANGLE
U+29CF  ⧏   LEFT TRIANGLE BESIDE VERTICAL BAR
U+29D0  ⧐   VERTICAL BAR BESIDE RIGHT TRIANGLE
U+29D1  ⧑   BOWTIE WITH LEFT HALF BLACK
U+29D2  ⧒   BOWTIE WITH RIGHT HALF BLACK
U+29D3  ⧓   BLACK BOWTIE
U+29D4  ⧔   TIMES WITH LEFT HALF BLACK
U+29D5  ⧕   TIMES WITH RIGHT HALF BLACK
U+29D6  ⧖   WHITE HOURGLASS
U+29D7  ⧗   BLACK HOURGLASS
U+29E8  ⧨   DOWN-POINTING TRIANGLE WITH LEFT HALF BLACK
U+29E9  ⧩   DOWN-POINTING TRIANGLE WITH RIGHT HALF BLACK
U+29EA  ⧪   BLACK DIAMOND WITH DOWN ARROW
U+29EB  ⧫   BLACK LOZENGE
U+29EC  ⧬   WHITE CIRCLE WITH DOWN ARROW
U+29ED  ⧭   BLACK CIRCLE WITH DOWN ARROW
U+29F4  ⧴   RULE-DELAYED
U+29FC  ⧼   LEFT-POINTING CURVED ANGLE BRACKET
U+29FD  ⧽   RIGHT-POINTING CURVED ANGLE BRACKET
U+29FE  ⧾   TINY
U+29FF  ⧿   MINY
U+2B00  ⬀   NORTH EAST WHITE ARROW
U+2B01  ⬁   NORTH WEST WHITE ARROW
U+2B02  ⬂   SOUTH EAST WHITE ARROW
U+2B03  ⬃   SOUTH WEST WHITE ARROW
U+2B04  ⬄   LEFT RIGHT WHITE ARROW
U+2B05     LEFTWARDS BLACK ARROW
U+2B06     UPWARDS BLACK ARROW
U+2B07     DOWNWARDS BLACK ARROW
U+2B08  ⬈   NORTH EAST BLACK ARROW
U+2B09  ⬉   NORTH WEST BLACK ARROW
U+2B0A  ⬊   SOUTH EAST BLACK ARROW
U+2B0B  ⬋   SOUTH WEST BLACK ARROW
U+2B0C  ⬌   LEFT RIGHT BLACK ARROW
U+2B0D  ⬍   UP DOWN BLACK ARROW
U+2B0E  ⬎   RIGHTWARDS ARROW WITH TIP DOWNWARDS
U+2B0F  ⬏   RIGHTWARDS ARROW WITH TIP UPWARDS
U+2B10  ⬐   LEFTWARDS ARROW WITH TIP DOWNWARDS
U+2B11  ⬑   LEFTWARDS ARROW WITH TIP UPWARDS
U+2B12  ⬒   SQUARE WITH TOP HALF BLACK
U+2B13  ⬓   SQUARE WITH BOTTOM HALF BLACK
U+2B14  ⬔   SQUARE WITH UPPER RIGHT DIAGONAL HALF BLACK
U+2B15  ⬕   SQUARE WITH LOWER LEFT DIAGONAL HALF BLACK
U+2B16  ⬖   DIAMOND WITH LEFT HALF BLACK
U+2B17  ⬗   DIAMOND WITH RIGHT HALF BLACK
U+2B18  ⬘   DIAMOND WITH TOP HALF BLACK
U+2B19  ⬙   DIAMOND WITH BOTTOM HALF BLACK
U+2B1A  ⬚   DOTTED SQUARE
U+2B1B     BLACK LARGE SQUARE
U+2B1C     WHITE LARGE SQUARE
U+2B1D  ⬝   BLACK VERY SMALL SQUARE
U+2B1E  ⬞   WHITE VERY SMALL SQUARE
U+2B1F  ⬟   BLACK PENTAGON
U+2B20  ⬠   WHITE PENTAGON
U+2B21  ⬡   WHITE HEXAGON
U+2B22  ⬢   BLACK HEXAGON
U+2B23  ⬣   HORIZONTAL BLACK HEXAGON
U+2B24  ⬤   BLACK LARGE CIRCLE
U+2B25  ⬥   BLACK MEDIUM DIAMOND
U+2B26  ⬦   WHITE MEDIUM DIAMOND
U+2B27  ⬧   BLACK MEDIUM LOZENGE
U+2B28  ⬨   WHITE MEDIUM LOZENGE
U+2B29  ⬩   BLACK SMALL DIAMOND
U+2B2A  ⬪   BLACK SMALL LOZENGE
U+2B2B  ⬫   WHITE SMALL LOZENGE
U+2B30  ⬰   LEFT ARROW WITH SMALL CIRCLE
U+2B31  ⬱   THREE LEFTWARDS ARROWS
U+2B32  ⬲   LEFT ARROW WITH CIRCLED PLUS
U+2B33  ⬳   LONG LEFTWARDS SQUIGGLE ARROW
U+2B34  ⬴   LEFTWARDS TWO-HEADED ARROW WITH VERTICAL STROKE
U+2B35  ⬵   LEFTWARDS TWO-HEADED ARROW WITH DOUBLE VERTICAL STROKE
U+2B36  ⬶   LEFTWARDS TWO-HEADED ARROW FROM BAR
U+2B37  ⬷   LEFTWARDS TWO-HEADED TRIPLE DASH ARROW
U+2B38  ⬸   LEFTWARDS ARROW WITH DOTTED STEM
U+2B39  ⬹   LEFTWARDS ARROW WITH TAIL WITH VERTICAL STROKE
U+2B3A  ⬺   LEFTWARDS ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2B3B  ⬻   LEFTWARDS TWO-HEADED ARROW WITH TAIL
U+2B3C  ⬼   LEFTWARDS TWO-HEADED ARROW WITH TAIL WITH VERTICAL STROKE
U+2B3D  ⬽   LEFTWARDS TWO-HEADED ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2B3E  ⬾   LEFTWARDS ARROW THROUGH X
U+2B3F  ⬿   WAVE ARROW POINTING DIRECTLY LEFT
U+2B40  ⭀   EQUALS SIGN ABOVE LEFTWARDS ARROW
U+2B41  ⭁   REVERSE TILDE OPERATOR ABOVE LEFTWARDS ARROW
U+2B42  ⭂   LEFTWARDS ARROW ABOVE REVERSE ALMOST EQUAL TO
U+2B43  ⭃   RIGHTWARDS ARROW THROUGH GREATER-THAN
U+2B44  ⭄   RIGHTWARDS ARROW THROUGH SUPERSET
U+2B45  ⭅   LEFTWARDS QUADRUPLE ARROW
U+2B46  ⭆   RIGHTWARDS QUADRUPLE ARROW
U+2B47  ⭇   REVERSE TILDE OPERATOR ABOVE RIGHTWARDS ARROW
U+2B48  ⭈   RIGHTWARDS ARROW ABOVE REVERSE ALMOST EQUAL TO
U+2B49  ⭉   TILDE OPERATOR ABOVE LEFTWARDS ARROW
U+2B4A  ⭊   LEFTWARDS ARROW ABOVE ALMOST EQUAL TO
U+2B4B  ⭋   LEFTWARDS ARROW ABOVE REVERSE TILDE OPERATOR
U+2B4C  ⭌   RIGHTWARDS ARROW ABOVE REVERSE TILDE OPERATOR
U+2B50     WHITE MEDIUM STAR
U+2B51  ⭑   BLACK SMALL STAR
U+2B52  ⭒   WHITE SMALL STAR
U+2B53  ⭓   BLACK RIGHT-POINTING PENTAGON
U+2B54  ⭔   WHITE RIGHT-POINTING PENTAGON
U+2B55     HEAVY LARGE CIRCLE
U+2B56  ⭖   HEAVY OVAL WITH OVAL INSIDE
U+2B57  ⭗   HEAVY CIRCLE WITH CIRCLE INSIDE
U+2B58  ⭘   HEAVY CIRCLE
U+2B59  ⭙   HEAVY CIRCLED SALTIRE

OPTION 2: CHEVRONS CSS PURS

J'ai récemment fait un article sur la création de chevrons en utilisant uniquement CSS (Aucune image requise).

Comment modifier simplement:

  • ROTATION
  • ÉPAISSEUR
  • COULEUR
  • TAILLE

>>> CLIQUEZ POUR DEMO <<<


enter image description here


CSS (Efficace avec le soutien de plusieurs navigateurs)

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent;/*adjust size*/
}
/* Replace all text `top` below with left/right/bottom to rotate the chevron */
.Chevron:before{
    top:0;
    border-top-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    top:-10px;/*adjust thickness*/
    border-top-color:#fff;/*Match background colour*/
}
<i class="Chevron"></i>


OPTION 3: ICÔNES D'IMAGE CSS BASE64

UP/DOWN  HAUT / BAS 

DOWN  VERS LE BAS 

UP  UP

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


>>> CLIQUEZ POUR DEMO <<<


AVANTAGES

  • Pas besoin d'inclure des ressources supplémentaires sous la forme d'images ou de polices.
  • Prend en charge la transparence alpha complète.
  • Support complet du navigateur croisé.
  • Les petites images / icônes peuvent être stockées dans une base de données.

LES INCONVÉNIENTS

  • La mise à jour / l'édition peut devenir un problème.
  • Ne convient pas aux grandes images en raison du balisage de code excessif 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;
}

498
2018-03-03 20:12



Désolé mais ils sont seulement en Unicode. :(

De grands:

  • U+25B2 (Triangle noir pointant vers le haut ▲)
  • U+25BC (Noir triangle pointant vers le bas ▼)
  • U+25C0 (Triangle noir pointant vers la gauche)
  • U+25B6 (Triangle noir à droite)

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

Aussi quelques 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 y a aussi des triangles "pointus". Vous pouvez en lire plus ici sur Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes

Mais malheureusement, ils sont tous Unicode au lieu d'ASCII. Si vous voulez toujours utiliser ASCII, vous pouvez utiliser un fichier image pour l'utiliser ^ et v. (Tout comme Google Maps dans la version mobile cela faisait référence à la ancien Google Maps mobile)


Comme d'autres l'ont également suggéré, vous pouvez également créer des triangles avec du HTML, soit avec des bordures CSS ou des formes SVG ou même des canevas JavaScript.

CSS

div{
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}

SVG

<svg width="16" height="10">
    <polygon points="0,0 16,0 8,10"/>
</svg>

JavaScript

var ctx = document.querySelector("canvas").getContext("2d");

// do not use with() outside of this demo!
with(ctx){
    beginPath();
    moveTo(0,0);
    lineTo(16,0);
    lineTo(8,10);
    fill();
    endPath();
}

Démo


261
2018-06-12 22:19



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 à la place 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/


92
2018-06-06 14:14



Que diriez-vous de ces caractères Unicode?

˅

&#x2C4; et &#x2C5; respectivement.


78
2018-04-23 18:57



Il existe plusieurs manières correctes d'afficher un triangle pointant vers le bas.

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

HTML:

&#9660;

Méthode 2: utiliser l'entité HTML hexidécimal

HTML:

&#x25BC;

Méthode 3: utiliser le caractère directement

HTML:


Méthode 4: utiliser CSS

HTML:

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

CSS:

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

Chacune de ces trois méthodes devrait avoir le même résultat. 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. &hearts; afficher ).

Vous pouvez utiliser un site de référence comme Unicode-table.com pour trouver quelles icônes sont supportées dans UNICODE et quels codes ils correspondent. Par exemple, vous trouvez les valeurs du triangle pointant vers le bas à http://unicode-table.com/fr/25BC/.

Notez que ces méthodes sont suffisantes uniquement pour les icônes disponibles par défaut dans tous les navigateurs. Pour des symboles tels que ,, ★ ,, ⎗, ⎗ ou ⎘, il est beaucoup moins probable que ce soit le cas. Bien qu'il soit possible de fournir un support inter-navigateurs pour d'autres symboles UNICODE, la procédure est un peu plus compliquée.

Si vous voulez savoir comment ajouter un support pour les caractères UNICODE moins courants, voir Créer un webfont avec les symboles du plan multilingue supplémentaire Unicode pour plus d'informations sur la façon de le faire.


Images de fond

Une stratégie totalement différente est l'utilisation d'images de fond au lieu de polices. Pour des performances optimales, il est préférable d'intégrer l'image dans votre fichier CSS en l'encodant en base, 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 base64 pour et la version SVG de la enter image description here 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 basées sur SVG et les polices d'icônes sont largement équivalentes en termes de performance 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 stylés par le document HTML
  • Ils peuvent être chargés en tant que fichier séparé, incorporés dans CSS ET incorporés 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 incorporé dans le code HTML. La duplication n'est pas requise lors de l'incorporation du fichier dans la feuille de style CSS ou lors du chargement en tant que 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 modifier l'affichage de votre icône, mais vous pouvez référencer différents composants de l'icône en tant que formes individuellement.
  • Vous avez besoin d'une connaissance de l'encodage SVG et / ou base64
  • Support limité ou inexistant dans les anciennes versions d'IE

Polices d'icônes

  • Une icône peut avoir une seule couleur de remplissage, une seule couleur de fond, etc.
  • Une icône peut être intégrée en 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'un webfont. La plupart des symboles ne peuvent pas.
  • Les utilisations multiples du même symbole impliquent la duplication du symbole lorsque votre personnage est intégré dans le code HTML. La duplication n'est pas requise lors de l'intégration du fichier dans le 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 particulières
  • Support dans tous les principaux navigateurs, y compris les anciennes 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-coloret d'autres règles CSS liées aux couleurs pour les polices.

Le principal avantage de l'utilisation des 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, ceci est très similaire au style HTML. Cela entraînerait toutefois 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 excès de ballonnement 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 prise en charge de SVG.


16
2017-12-09 14:29



"Pas ASCII (ni ↑ / ↓)" a besoin de qualification.

Bien que ces caractères ne soient pas définis dans le Code américain normalisé pour l'échange d'information en tant que glyphes, leurs codes étaient couramment utilisés pour donner une représentation graphique des codes ASCII 24 et 25 (hex 18 et 19, CANcel et EM: End of Medium). Code page 437 (appelé ASCII étendu par IBM, inclut les codes numériques 128 à 255) définissait l'utilisation de ces glyphes comme des codes ASCII et l'omniprésence de ces conventions imprégnait l'industrie vu par leur déploiement comme standard par des entreprises leaders telles que HP, notamment 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 comme glyphes, le passage du temps a rendu l'utilisation des codes comme des glyphes obsolètes par l'utilisation actuelle des conventions UNICODE.


Il convient de souligner que les extensions ASCII faites par IBM en format ASCII étendu incluent non seulement un ensemble numérique plus grand pour les codes numériques 128 à 255, mais aussi 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 de médias 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 gamme. Cette erreur est également perpétrée dans l'une des références précédentes. Cette erreur est devenue tellement omniprésente qu'elle a littéralement redéfini l'ASCII de façon subliminale.


14
2018-05-25 14:09



Je sais que je suis en retard à la fête, mais vous pouvez aussi 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 de faire un élément block / inline-block avec display:block; ou display:inline-block):

<div class="up"></div>

et

<div class="down"></div>

CSS:

.up {
   height:0;
   width:0;
   border-top:100px solid black;
   border-left:100px solid transparent;
   transform:rotate(-45deg);   
  }

.down {
   height:0;
   width:0;
   border-bottom:100px solid black;
   border-right:100px solid transparent;
   transform:rotate(-45deg); 
  }

Vous pouvez également l'accomplir en utilisant :before et :after pseudo-éléments, ce qui est en fait un meilleur moyen puisque vous évitez de créer un balisage supplémentaire. Mais c'est à vous de décider comment vous voulez l'accomplir.

-

Voici un Démo dans CodePen avec de nombreuses possibilités de flèches.


13
2017-10-03 17:55



Entités HTML pour les triangles vides
◁ = &#9665; 
▷ = &#9655; 
▽ = &#9661; 
△ = &#9651;




10
2017-12-17 12:21



▲ ▼ Ce sont U + 25B2 (&#x25B2) et U + 25BC (&#x25BC) respectivement


9
2018-04-23 18:59