什么字符可以用于在 HTML 中显示的上/下三角形（没有茎的箭头）？

Question

提问by Timj

I'm looking for a HTMLor ASCIIcharacter which is a triangle pointing up or down so that I can use it as a toggle switch.

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

I found ↑ (↑), and ↓ (↓) - but those have a narrow stem. I'm looking just for the HTML arrow "head".

我找到了 ↑ ( ↑) 和 ↓ ( ↓) - 但它们的词干很窄。我只是在寻找 HTML 箭头“头”。

Answer 1

回答by bobince

Unicode arrows heads:

Unicode 箭头：

▲ - U+25B2 BLACK UP-POINTING TRIANGLE
▼ - U+25BC BLACK DOWN-POINTING TRIANGLE
? - U+25B4 SMALL BLACK UP-POINTING TRIANGLE
? - U+25BE SMALL BLACK DOWN-POINTING TRIANGLE

▲ - U+25B2 黑色向上三角形
▼ - U+25BC 黑色下指三角形
? - U+25B4 黑色小三角形
? - U+25BE 小黑倒三角

For ▲ and ▼ use ▲and ▼respectively if you cannot include Unicode characters directly (use UTF-8!).

对于 ▲ 和 ▼ ▲，▼如果您不能直接包含 Unicode 字符（使用 UTF-8！），请分别使用和。

Note that the font support for the smaller versions is not as good. Better to use the large versions in smaller font.

请注意，对较小版本的字体支持不太好。最好使用较小字体的大版本。

More Unicode arrows are at:

更多 Unicode 箭头位于：

Lastly, these arrows are not ASCII, including ↑ and ↓: they are Unicode.

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

Answer 2

回答by sarah

For HTML Entities
◄ = ◄
► = ►
▼ = ▼
▲ = ▲

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

Answer 3

回答by DreamTeK

OPTION 1: UNICODE COLUMN SORT ARROWS

选项 1：UNICODE 列排序箭头

I found this one very handy for a single character column sorter. (Looks good upscaled).

我发现这对于单字符列排序器非常方便。（看起来不错放大）。

⇕= ?

Unicode table column sort arrows

Unicode 表列排序箭头

IMPORTANT NOTE(When using Unicode symbols)

重要说明（使用 Unicode 符号时）

Unicode support varies dependant on the symbol of choice, browser and the font family. If you find your chosen symbol does not work in some browsers then try using a different font-family. Microsoft recommends "Segoe UI Symbol"however it would be wise to include the font with your website as not many people have it on their computers.

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

Open this page in other browsers to see which symbols render with the default font.

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

Some more Unicode arrows.

一些更多的 Unicode 箭头。

You can copy them right off the page below or you can use the code.

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

Each row of arrows is numbered from left to right:

每行箭头从左到右编号：

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

Simply insert the corresponding number/letter before the closing semi-colon as above.

如上所述，只需在结束分号之前插入相应的数字/字母即可。

ș

← ↑ → ↓ ? ? ↖ ↗ ↘ ↙ ? ? ? ? ? ?

Ț

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

ț

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Ȝ

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

ȝ

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Ȟ

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

ȟ

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Additional HTML unicode symbols

额外的 HTML Unicode 符号

A selected list of other helpful Unicode icons/symbols.

其他有用的 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 RAINDROPS
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 SUITE
U+2664  ?   WHITE SPADE SUIT
U+2665  ?   BLACK HEART SUIT
U+2666  ?   BLACK DIAMOND SUIT
U+2667  ?   WHITE CLUB SUITE
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 DRAUGHTSMAN
U+26C1  ?   WHITE DRAUGHTS KING
U+26C2  ?   BLACK DRAUGHTSMAN
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  ?   NORTHWEST AND SOUTH EAST ARROW
U+2922  ?   NORTHEAST 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  ?   SOUTHWEST 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: PURE CSS CHEVRONS

选项 2：纯 CSS V 字形

I recently made an article about creating chevrons efficiently using only CSS (No images required).

我最近发表了一篇关于仅使用 CSS （不需要图像）高效创建 V 形的文章。

How to simply alter:

如何简单地改变：

ROTATION
THICKNESS
COLOR
SIZE

回转
厚度
颜色
尺寸

CLICK FOR DEMO ON JSFIDDLE

enter image description here

在此处输入图片说明

CSS(Efficient with cross browser support)

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>

OPTION 3: CSS BASE64 IMAGE ICONS

选项 3：CSS BASE64 图像图标

UP/DOWN UP/DOWN

向上/向下

DOWN DOWN

下

UP

向上

Using only a few lines of CSS we can encode our images into base64.

只需使用几行 CSS，我们就可以将图像编码为 base64。

CLICK FOR DEMO ON JSFIDDLE

PROS

优点

No need to include additional resources in the form of images or fonts.
Supports full alpha transparency.
Full cross-browser support.
Small images/icons can be stored in a database.

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

CONS

缺点

Updating/editing can become a hassle.
Not suitable for large images due to excessive code markup that's generated.

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

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

回答by u283863

Sorry but they are only in Unicode. :(

抱歉，它们仅使用 Unicode。:(

Big ones:

大的：

U+25B2(Black up-pointing triangle ▲)
U+25BC(Black down-pointing triangle ▼)
U+25C0(Black left-pointing triangle ?)
U+25B6(Black right-pointing triangle ?)

U+25B2（黑色上指三角形▲）
U+25BC（黑色下三角▼）
U+25C0（黑色的左指三角形？）
U+25B6（黑色右指三角形？）

Big white ones:

大白的：

U+25B3(White up-pointing triangle △)
U+25BD(White down-pointing triangle ▽)
U+25C1(White left-pointing triangle ?)
U+25B7(White right-pointing triangle ?)

U+25B3（白色上指三角形△）
U+25BD(白色下三角▽)
U+25C1（白色的左指三角形？）
U+25B7（白色右指三角形？）

There is also some smalller triangles:

还有一些较小的三角形：

U+25B4(Black up-pointing small triangle ?)
U+25C2(Black left-pointing small triangle ?)
U+25BE(Black down-pointing small triangle ?)
U+25B8(Black right-pointing small triangle ?)

U+25B4（黑色向上指的小三角形？）
U+25C2（黑色的左指小三角形？）
U+25BE（黑色向下的小三角形？）
U+25B8（黑色右指小三角形？）

Also some white ones:

还有一些白色的：

U+25C3(White left-pointing small triangle ?)
U+25BF(White down-pointing small triangle ?)
U+25B9(White right-pointing small triangle ?)
U+25B5(White up-pointing small triangle ?)

U+25C3（白色的左指小三角形？）
U+25BF（白色向下的小三角形？）
U+25B9（白色右指小三角形？）
U+25B5（白色向上指的小三角形？）

There are also some "pointy" triangles. You can read more here in Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes

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

But unfortunately, they are all Unicode instead of ASCII. If you still want to use ASCII, then you can use an image file for it of just use ^and v. (~~Just like the Google Maps in the mobile version~~this was referring to the ancientmobile Google Maps)

但不幸的是，它们都是 Unicode 而不是 ASCII。如果您仍然想使用 ASCII，那么您可以使用一个图像文件，只需使用^和v. （~~就像手机版的谷歌地图，~~这是指古代的手机谷歌地图）

As others also suggested, you can also create triangles with HTML, either with CSS borders or SVG shapes or even JavaScript canvases.

正如其他人所建议的，您还可以使用 HTML 创建三角形，使用 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();
}

Demo

演示

Answer 5

回答by Magnus Magnusson

Since you're using these arrows for a toggle switch you may want to consider creating these arrows with an html element using the following styles instead of unicode characters.

由于您将这些箭头用于切换开关，您可能需要考虑使用以下样式而不是 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/

Answer 6

回答by Fyodor Soikin

There are literal arrowheads in the Spacing Modifier Lettersblock:

间距修饰符字母块中有文字箭头：

U+02C2  ?   &#706;  Modifier Letter Left  Arrowhead
U+02C3  ?   &#707;  Modifier Letter Right Arrowhead
U+02C4  ?   &#708;  Modifier Letter Up    Arrowhead
U+02C5  ?   &#709;  Modifier Letter Down  Arrowhead

Answer 7

回答by John Slegers

There are several correct ways to display a down-pointing triangle.

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

Method 1 : use decimal HTML entity

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

HTML :

&#9660;

Method 2 : use hexidecimal HTML entity

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

HTML :

&#x25BC;

Method 3 : use character directly

方法三：直接使用字符

HTML :

▼

Method 4 : use CSS

方法四：使用CSS

HTML :

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

CSS :

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

Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. &hearts;to display ?).

这三种方法中的每一种都应该具有相同的输出。对于其他符号，存在相同的三个选项。有些甚至还有第四个选项，允许您使用基于字符串的引用（例如&hearts;显示？）。

You can use a reference website like Unicode-table.comto find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.

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

Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ?,?,★,?,?,? or ?, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, the procedure is a bit more complicated.

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

If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbolsfor more info on how to do this.

如果您想知道如何添加对不太常见的 UNICODE 字符的支持，请参阅使用 Unicode 补充多语言平面符号创建 webfont 以获取有关如何执行此操作的更多信息。

Background images

背景图片

A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. @weasel5i2 and @Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.

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

This following code is the base64 for and SVG version of the enter image description here icon :

以下代码是在此处输入图片说明图标的 base64 和 SVG 版本：

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

When to use background-images or fonts

何时使用背景图像或字体

For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:

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

SVG images

SVG 图像

They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-coloror other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE

它们可以有多种颜色
他们可以嵌入自己的 CSS 和/或由 HTML 文档设置样式
它们可以作为单独的文件加载，嵌入在 CSS 中和嵌入在 HTML 中
每个符号都由 XML 代码或 base64 代码表示。您不能直接在代码编辑器中使用该字符或使用 HTML 实体
当 XML 代码嵌入 HTML 时，同一符号的多次使用意味着符号的重复。将文件嵌入 CSS 或将其作为单独文件加载时不需要重复
不能使用color，font-size，line-height，background-color或其他字体相关的样式规则更改图标的显示，但可以参考的图标作为单独的形状不同的组件。
您需要了解 SVG 和/或 base64 编码
对旧版本 IE 的支持有限或不支持

Icon fonts

图标字体

An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-coloror other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE

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

Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-colorand other color-related CSS rules for fonts.

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

The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.

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

Answer 8

回答by ekim

"Not ASCII (neither's ↑/↓)" needs qualification.

“不是 ASCII（既不是 ↑/↓）”需要限定。

While these characters are not defined in the American Standard Code for Information Interchangeas glyphs, their codes WERE commonly used to give a graphical presentation for ASCII codes 24 and 25 (hex 18 and 19, CANcel and EM:End of Medium). Code page 437(called Extended ASCII by IBM, includes the numeric codes 128 to 255) defined the use of these glyphs as ASCII codes and the ubiquity of these conventions permeated the industry as seen by their deployment as standards by leading companies such as HP, particularly for printers, and IBM, particularly for microcomputers starting with the original PC.

虽然这些字符在美国信息交换标准代码中没有定义为字形，但它们的代码通常用于为 ASCII 代码 24 和 25（十六进制 18 和 19，CANcel 和 EM:End of Medium）提供图形表示。代码页 437（IBM 称为扩展 ASCII，包括数字代码 128 到 255）定义了这些字形作为 ASCII 代码的使用，并且这些约定在行业中无处不在，正如惠普等领先公司将其部署为标准所见，尤其是打印机，IBM，尤其是从原始 PC 开始的微型计算机。

Just as the use of the ASCII codes for CAN and EM was relatively obsolete at the time, justifying their use as glyphs, so has the passage of time made the use of the codes as glyphs obsolete by the current use of UNICODE conventions.

正如当时使用 CAN 和 EM 的 ASCII 代码相对过时一样，证明它们作为字形的使用是合理的，随着时间的推移，使用 UNICODE 约定的代码作为字形已经过时了。

It should be emphasized that the extensions to ASCII made by IBM in Extended ASCII, included not only a larger numeric set for numeric codes 128 to 255, but also extended the use of some numeric control codes, in the ASCII range 0 to 32, from just media transmission control protocols to include glyphs. It is often assumed, incorrectly, that the first 0 to 128 were not "extended" and that IBM was using the glyphs of conventional ASCII for this range. This error is also perpetrated in one of the previous references. This error became so pervasive that it colloquially redefined ASCII subliminally.

需要强调的是，IBM 在 Extended ASCII 中对 ASCII 的扩展，不仅包括了更大的数字代码 128 到 255 的数字集，还扩展了一些数字控制代码的使用，在 0 到 32 的 ASCII 范围内，从只是包含字形的媒体传输控制协议。人们常常错误地假设前 0 到 128 没有“扩展”，并且 IBM 在这个范围内使用传统 ASCII 的字形。以前的参考文献之一也发生了此错误。这个错误变得如此普遍，以至于它在潜意识中通俗地重新定义了 ASCII。

Answer 9

回答by Ricardo Zea

I know I'm late to the party but you can accomplish this with plain CSS as well:

我知道我迟到了，但你也可以用普通的 CSS 来完成：

HTML:

HTML：

(It can be any HTML element, if you're using an inline element like a <span>for example, make sure you make it a block/inline-block element with display:block;or display:inline-block):

（它可以是任何 HTML 元素，如果您使用的是内联元素，例如 a <span>，请确保使用display:block;或使其成为块/内联块元素display:inline-block）：

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

and

和

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

CSS:

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

You can also accomplish it using :beforeand :afterpseudo-elements, which is actually a better way since you avoid creating extra markup. But that's up to you on how you'd like to accomplish it.

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

--

——

Here's a Demo in CodePenwith many arrow possibilities.

这是CodePen 中的一个演示，其中包含许多箭头可能性。

Answer 10

回答by Rumi P.

A lot of people here are suggesting to use the triangles, but sometimes you need a chevron.

这里的很多人都建议使用三角形，但有时你需要一个 V 形。

We had a case where our button shows a chevron, and wanted the user's manual to refer to the button in a way which will be recognized by a non-technical user too. So we needed a chevron sign.

我们有一个案例，我们的按钮显示 V 形，并希望用户手册以非技术用户也能识别的方式引用按钮。所以我们需要一个人字形标志。

We used ﹀ in the end. It is known as PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET and its code is U+FE40.

我们最终使用了﹀。它被称为垂直直角支架的演示表格，其代码为 U+FE40。

什么字符可以用于在 HTML 中显示的上/下三角形（没有茎的箭头）？

提问by Timj

回答by bobince

回答by sarah

回答by DreamTeK

OPTION 1: UNICODE COLUMN SORT ARROWS

选项 1：UNICODE 列排序箭头

← ↑ → ↓ ? ? ↖ ↗ ↘ ↙ ? ? ? ? ? ?

← ↑ → ↓ ? ? ↖ ↗ ↘ ↙ ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

OPTION 2: PURE CSS CHEVRONS

选项 2：纯 CSS V 字形

OPTION 3: CSS BASE64 IMAGE ICONS

选项 3：CSS BASE64 图像图标

回答by u283863

CSS

CSS

SVG

SVG

JavaScript

JavaScript

Demo

演示

回答by Magnus Magnusson

回答by Fyodor Soikin

回答by John Slegers

Method 1 : use decimal HTML entity

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

Method 2 : use hexidecimal HTML entity

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

Method 3 : use character directly

方法三：直接使用字符

Method 4 : use CSS

方法四：使用CSS

Background images

背景图片

When to use background-images or fonts

何时使用背景图像或字体

回答by ekim

回答by Ricardo Zea

回答by Rumi P.

相关推荐

Html 点击调用html

Html Rails 和 <span> 标签

Html 链接到当前页面中的元素

Html 按列响应表

相关推荐

最近更新

标签