题 在HTML中显示哪些字符可用于上/下三角(不带箭头的箭头)?


我正在寻找一个 HTML 要么 ASCII 字符是向上或向下的三角形,以便我可以将其用作切换开关。

我找到了↑(↑)和↓(↓) - 但那些茎很窄。我正在寻找HTML箭头“head”。


1112
2018-04-23 18:51


起源


如果你想保持简单,可以使用克拉“^”(即shift-6)和小写“v”。根据您指定的字体,它们看起来像箭头。 - meagar♦
查看此网站了解更多ASCII字符 http://graphemica.com/characters - mateusmaso
@mateusmaso - 那些是Unicode。 - Derek 朕會功夫
这是在一个页面上找到它们的快速方法: amp-what.com/#q=triangle - ndp
这是一个捣乱收集每个可能的Unicode箭头的人: xahlee.info/comp/unicode_arrows.html - Mark Ransom


答案:


Unicode箭头:

  • ▲ - U + 25B2黑色上升三角形
  • ▼ - U + 25BC黑色下降三角形
  • ▴ - U + 25B4小黑点三角形
  • ▾ - U + 25BE小黑色落地三角形

对于▲和▼使用 ▲ 和 ▼ 如果你不能直接包含Unicode字符(使用UTF-8!)。

请注意,较小版本的字体支持不是很好。最好使用较小字体的大版本。

更多Unicode箭头位于:

最后,这些箭头不是ASCII,包括↑和↓:它们是Unicode。


1477
2018-04-23 18:57



此外,要完成第一组(向上向下 - 向右 - ▲▼▼),左边是U + 25C0,右边是U + 25B6。我在这里找到了这些: unicode.org/charts - Nathan Long
“Unicode三角形。”只是想为了谷歌的缘故这么说。 :) - Nathan Long
哈哈!我只是再次需要这些并搜索“Unicode三角形”。谷歌把我带到了这里。好哇! - Nathan Long
是的,虽然/字体/后备支持不如▲/▼...通常IE6用户会看到正方形。左/右“指针”字符◄/►稍微广泛支持,但仍然不像上/下那样常见。 - bobince
另一个注意事项:要在CSS中添加这些,您只需使用前面带反斜杠的数字部分,即.example {content:“\ 25B2”; } - Andrew


对于HTML实体 
◄= ◄ 
►= ► 
▼= ▼ 
▲= ▲


648
2018-05-02 06:15



我正在测试那些html实体。我可以报告左箭头在Android浏览器中没有显示,但是右箭头确实如此。 - user2070775
@ user2070775确实: saucelabs.com/jobs/55afcb2086824f4c9c0c1643f2485952/... 。 Droid Sans和Roboto字体没有三角形; Droid Serif有这4个(黑色向上/向下箭头,黑色向左/向右指示); Droid Sans Fallback有所有黑/白/上/下/左/右三角和黑色指示点 - 但没有左点指示。 - Beni Cherniavsky-Paskin
这些的ALT代码是(Alt + 30)▲,(Alt + 31)▼,(Alt + 16)►,(Alt + 17)◄,用于手动输入这些代码的人。 - Nate
这些字符在IE8中有效。一般来说,它们在浏览器中更加一致,在Windows中看起来比接受答案中的三角形更好。 - Will Koehler
他们是同样的答案。例如, 十进制9650是十六进制25B2 (&#x25B2是&#9650)。 - Erik Philips


选项1:UNICODE COLUMN SORT ARROWS

我发现这个单个字符列分类器非常方便。 (看起来很好的升级)

⇕ =⇕

Unicode table column sort arrows

重要的提示  (使用unicode符号时)

Unicode支持因所选符号,浏览器和字体系列而异。如果您发现所选符号在某些浏览器中不起作用,请尝试使用其他字体系列。微软推荐 "Segoe UI Symbol" 然而,将字体包含在您的网站中是明智的,因为没有多少人在他们的计算机上使用它。

在其他浏览器中打开此页面以查看使用默认字体呈现的符号。


一些更多的unicode箭头。

您可以直接从下面的页面复制它们,也可以使用代码。

每行箭头从左到右编号:

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

只需在上面的结束分号前插入相应的数字/字母。


ș

←↑→↓↚↛↜↝↞↟


Ț

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


ț

↰↱↲↳↵↶↷↸↺↺↺↼↼↽↾↾


Ȝ

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


ȝ

⇐⇐⇒⇓⇕⇕⇗⇘⇙⇚⇛⇜⇝⇞⇞


Ȟ

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


ȟ

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


其他HTML unicode符号

选定的其他有用的unicode图标/符号列表。

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

选项2:PURE CSS CHEVRONS

我最近发表了一篇关于仅使用CSS有效创建雪佛龙的文章 (无需图像)。

如何简单地改变:

  • 回转
  • 厚度
  • 颜色
  • 尺寸

>>>点击演示<<<


enter image description here


CSS (通过跨浏览器支持高效)

.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>


选项3:CSS BASE64图像图标

UP/DOWN  UP / DOWN 

DOWN   

UP  向上

只使用几行css,我们可以将图像编码为base64。


>>>点击演示<<<


PROS

  • 无需以图像或字体的形式包含其他资源。
  • 支持完全alpha透明度。
  • 完全跨浏览器支持。
  • 小图像/图标可以存储在数据库中。

缺点

  • 更新/编辑可能会变得很麻烦。
  • 由于生成的代码标记过多,因此不适合大图像。

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;
}

500
2018-03-03 20:12



我们可以共同建立一个更加光明的互联网。花了很多时间。 - DreamTeK
+1 - 根据不同的选项,实施的详细描述和清晰的输出显示的最佳答案! - Termato
我不知道,这个答案似乎不完整...... - Steve Bennett
对不起,我觉得你的答案已经非常全面了。感谢你投入的所有辛勤工作。 - Steve Bennett
做得很好。它实际上有我正在寻找的确切上/下指针! - Lizardx


抱歉,他们只使用Unicode。 :(

大的:

  • U+25B2 (黑色指向三角形▲)
  • U+25BC (黑色向下三角形▼)
  • U+25C0 (黑色左指三角形)
  • U+25B6 (黑色右指三角形)

大白的:

  • U+25B3 (白色指向三角形△)
  • U+25BD (白色向下三角▽)
  • U+25C1 (白色左指三角◁)
  • U+25B7 (白色右指三角形▷)

还有一些小三角形:

  • U+25B4 (黑色向上指的小三角形▴)
  • U+25C2 (黑色左指小三角◂)
  • U+25BE (黑色向下指的小三角形▾)
  • U+25B8 (黑色右指小三角▸)

还有一些白色的:

  • U+25C3 (白色左指小三角◃)
  • U+25BF (白色向下指的小三角形▿)
  • U+25B9 (白色右指小三角▹)
  • U+25B5 (白色指向小三角▵)

还有一些“尖”的三角形。您可以在维基百科阅读更多内容:
http://en.wikipedia.org/wiki/Geometric_Shapes

但不幸的是,它们都是Unicode而不是ASCII。 如果您仍想使用ASCII,则可以使用图像文件进行使用 ^ 和 v。 (就像移动版中的Google地图一样 这指的是  移动谷歌地图)


正如其他人也建议的那样,您也可以使用CSS创建三角形,使用CSS边框或SVG形状甚至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();
}

演示


261
2018-06-12 22:19



奇怪的是它们不对称。 (至少在OSX上的Chrome中) - Drew LeSueur
如何在Windows CE中使用这些符号? - utvecklare
第一组的ALT代码为(Alt + 30)▲,(Alt + 31)▼,(Alt + 16)►,(Alt + 17)◄,用于手动输入这些代码的人。 - Nate
@Nate - 适用于Mac OS的那些?因为他们在Windows上不适合我。 - Derek 朕會功夫
这些是我以前在Visual Studio中获取它们的方法以及我在这里将它们输入到我的注释中的方式。 Windows 7.也许它不是通用的(虽然我认为是)。它可能是您使用的字体不支持这些字符。 - Nate


由于您将这些箭头用于切换开关,因此您可能需要考虑使用以下样式而不是unicode字符创建带有html元素的箭头。

.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



方形元素的四个边框以45°角相交,因此只需将其中一个边框着色,最后会形成一个三角形。你可以在这里看到一个例子: jsfiddle.net/FrsGR - Magnus Magnusson
我应该补充说,当它们完全相同时,它们以45°角相遇。通过更改与彩色边框相邻的边框宽度,您可以更改角度。 - Magnus Magnusson
PS:这些通常用于 :after 创建对话框泡泡。 - Derek 朕會功夫
应该注意的是,使用边框制作三角形的浏览器支持比:after伪元素更广泛。 - Magnus Magnusson
我花了一段时间才弄明白这是如何运作的。我添加了背景:红色到.arrow的小提琴中为“啊哈”时刻 - Andiih


这些Unicode字符怎么样?

˅

&#x2C4; 和 &#x2C5; 分别。


78
2018-04-23 18:57



这是十六进制,所以 &#x2C4; 或小数 &#708;。但是,如果您的页面编码正确,您应该能够将它们复制并粘贴到文档中。 - bobince
<math xmlns ='w3.org/1998/Math/MathML“>; <mover> <mi> u </ mi> <mo>&Hat; </ mo> </ mover> </ math> - noobninja
如上所述,这不适用于所有页面编码。我不确定为什么OP不会将它们作为十进制发布,无论编码如何都可以。使用和˅ - Lev
在Debian(小而向上移动)和Windows(大而垂直居中)上看起来完全不同。 - mimo


有几种正确的方法可以显示向下的三角形。

方法1:使用十进制HTML实体

HTML:

&#9660;

方法2:使用十六进制HTML实体

HTML:

&#x25BC;

方法3:直接使用字符

HTML:


方法4:使用CSS

HTML:

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

CSS:

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

这三种方法中的每一种都应具有相同的输出。对于其他符号,存在相同的三个选项。有些人甚至有第四个选项,允许你使用基于字符串的参考(例如。 &hearts; 显示 )。

你可以使用像这样的参考网站 Unicode-table.com 查找UNICODE中支持的图标以及它们对应的代码。例如,您可以在下面找到向下指向三角形的值 http://unicode-table.com/en/25BC/

请注意,这些方法仅适用于每个浏览器中默认可用的图标。对于像,,★,,☭,⎗或symbols这样的符号,这种情况的可能性要小得多。虽然可以为其他UNICODE符号提供跨浏览器支持,但该过程稍微复杂一些。

如果您想知道如何添加对不太常见的UNICODE字符的支持,请参阅 使用Unicode Supplementary Multilingual Plane符号创建webfont 有关如何执行此操作的详细信息。


背景图片

一种完全不同的策略是使用背景图像而不是字体。为了获得最佳性能,最好通过对其进行基本编码将图像嵌入到CSS文件中,如下所述。 @ weasel5i2和@Obsidian。我建议使用SVG而不是GIF,但是,这对于性能和符号的清晰度来说都更好。

以下代码是base64 for和SVG版本的 enter image description here 图标:

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

何时使用背景图像或字体

对于许多用例,基于SVG的背景图像和图标字体在性能和灵活性方面基本相同。要决定选择哪个,请考虑以下差异:

SVG图像

  • 它们可以有多种颜色
  • 他们可以嵌入自己的CSS和/或由HTML文档设置样式
  • 它们可以作为单独的文件加载,嵌入在CSS中并嵌入HTML中
  • 每个符号由XML代码或base64代码表示。您不能直接在代码编辑器中使用该字符或使用HTML实体
  • 当XML代码嵌入HTML中时,相同符号的多次使用意味着符号的重复。将文件嵌入CSS或将其作为单独文件加载时,不需要复制
  • 你不能用 colorfont-sizeline-heightbackground-color 或其他与字体相关的样式规则来更改图标的显示,但您可以单独将图标的不同组件引用为形状。
  • 您需要一些SVG和/或base64编码的知识
  • 旧版IE中有限或不支持

图标字体

  • 图标可以只有一种填充颜色,一种背景颜色等。
  • 图标可以嵌入CSS或HTML中。在HTML中,您可以直接使用该字符或使用HTML实体来表示它。
  • 可以在不使用webfont的情况下显示某些符号。大多数符号不能。
  • 当您的角色嵌入HTML中时,同一符号的多次使用意味着符号的重复。将文件嵌入CSS时不需要复制。
  • 您可以使用 colorfont-sizeline-heightbackground-color 或其他与字体相关的样式规则来更改图标的显示
  • 您不需要特殊的技术知识
  • 支持所有主流浏览器,包括旧版本的IE

就个人而言,我建议仅在需要多种颜色时使用背景图像,并且这些颜色无法通过以下方式实现 colorbackground-color和其他与颜色相关的字体CSS规则。

使用SVG图像的主要好处是,您可以为符号的不同组件提供自己的样式。如果将SVG XML代码嵌入HTML文档中,这与HTML样式非常相似。但是,这会导致网页同时使用HTML标记和SVG标记,这可能会显着降低网页的可读性。如果符号在多个页面上重复,它还会增加额外膨胀,并且您需要考虑旧版本的IE对SVG没有或有限支持。


16
2017-12-09 14:29





“不是ASCII(既不是↑/↓)”需要资格。

虽然这些字符没有在中定义 美国标准信息交换码 作为字形,它们的代码通常用于为ASCII码24和25(十六进制18和19,CANcel和EM:媒体结束)提供图形表示。 代码页437 (称为IBM的扩展ASCII,包括数字代码128到255)定义了这些字形作为ASCII代码的使用,这些惯例的普遍存在渗透到整个行业,正如惠普等领先公司将其部署为标准所看到的那样,特别是对于打印机而言和IBM,特别是从原始PC开始的微型计算机。

就像当时CAN和EM的ASCII码的使用相对过时一样,证明它们被用作字形时,时间的流逝使得代码的使用成为当前使用UNICODE惯例时过时的字形。


需要强调的是,IBM在扩展ASCII中对ASCII进行的扩展,不仅包括数字代码128到255的更大数字集,还扩展了一些数字控制代码的使用,在ASCII范围0到32之间,来自只是媒体传输控制协议包括字形。通常假设错误的是,前0到128没有“扩展”,并且IBM在此范围内使用传统ASCII的字形。此错误也在之前的参考文献中进行过。这个错误变得如此普遍,以至于它在语义上逐步重新定义了ASCII。


14
2018-05-25 14:09



很好的信息答案, 然而 我相信Timj要求↑/↓的替代品。 - David Hogue


我知道我迟到了,但你也可以用普通的CSS完成这个:

HTML:

(它可以是任何HTML元素,如果您使用内联元素,如 <span> 例如,确保将其作为块/内联块元素 display:block; 要么 display:inline-block

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

<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); 
  }

您也可以使用它完成它 :before 和 :after 伪元素,这实际上是一种更好的方法,因为您避免创建额外的标记。但这取决于你如何完成它。

-

这是一个 CodePen中的演示 有很多箭头的可能性。


13
2017-10-03 17:55



虽然能够在纯CSS中执行此操作很好,但是在Firefox或IE中存在一些问题,例如缺少着色支持,浪费了几个小时后,我又回到了Unicode箭头 - direct00
@ direct00你错过了这一点。如果您知道自己正在以某种方式设计箭头,那么您就会知道哪种方法最符合您的需求。如果你浪费了你的时间,这不是我的解决方案的问题,是你的。而且也不需要这种态度。祝你好运。 - Ricardo Zea