你在网站上使用什么Unicode字符？ （而不是图像图标）

Question

我正在寻找可以替换图像图标的角色，例如✘（xmark）和✔（勾选），也许是“草稿”或“新消息”的某些符号？

编辑：

收藏：❤

草稿：✍

消息：✉

Answer 1

为了找到有用的符号，我有两个很好的资源：

http://shapecatcher.com

允许您绘制一个形状，然后搜索形状相似的unicode符号。

https://www.fileformat.info/info/unicode/block/index.htm

按字符块列出unicode（使用嵌入式unicode字体以最大化显示的兼容性），并具有“显示带图像的特定块”功能，允许您查看符号块。

两者都非常有用，虽然我最近经常最终使用shapecatcher只是因为它是一个有趣的休息，只是为了能够绘制你想要的形状并让网站为你拉起它。至少，有时会提出来。

混杂。符号块

http://shapecatcher.com/unicode/block/Miscellaneous_Symbols_And_Pictographs也是一个很好的unicode符号类别，但与所有unicode一样，您可能需要测试兼容性。

https://www.fileformat.info/info/unicode/block/miscellaneous_symbols/images.htm是杂项符号的块，用于比较。

• ⌚U + 0231A WATCH
• ⌛U + 0231B HOURGLASS
• ♟U + 265F SOLID CHESS PAWN
• ⚷U + 26B7 CHIRON
• ★U + 2605 SOLID STAR
• ✓U+ 2713 CHECK MARK
• ☑U+ 2611 SQUARE CHECKBOX
• ✕U + 2715 MULTIPLICATION X
• ☒U + 2612 SQUARE X-ED BOX
• ⚠U + 26A0警告标志

也是添加到列表中的好符号。

编辑：在2019年，我现在建议使用强大的图标包，无论是svg形式还是字体文件形式，对于Web开发人员来说，unicode的呈现通常都不太可控。

Answer 2

stackoverflow.com曾经使用“●”（U+25CF BLACK CIRCLE）作为徽章。

Unicode中有很多有用的字符：

• ✆U+2706 TELEPHONE LOCATION SIGN
• ✉U+2709 ENVELOPE
• ☎U+260E BLACK TELEPHONE和☏U+260F WHITE TELEPHONE
• ✎U+270E LOWER RIGHT PENCIL
• ⌛U+231B HOURGLASS
• ⌨U+2328 KEYBOARD

Answer 3

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙

仅举几例......

Answer 4

为什么不只是仔细阅读the whole list？

Answer 5

查看http://unicode.org/charts#symbols的一些想法。我不确定什么会对“草稿”或“新消息”起作用，但有很多可供选择。

Answer 6

我使用了阻挡箭头： U + 25b2▲，U +25ba►，U + 25bc▼，U +25c4◄

Answer 7

浏览器页面中选择的字体可能不支持某些符号。即使他们是，他们中的很多人看起来很小。如果可以，最好使用图像。

Answer 8

http://unicode-table.com/也很棒，但对于为网页设计图标设计的一些unicodes，我建议：http://kudakurage.com/ligature_symbols/。

Answer 9

Twitter Bootstrap使用×（×）来关闭按钮。

Answer 10

我建议使用自定义字体，例如https://github.com/FortAwesome/Font-Awesome

你也可以拥有svg / png版本https://github.com/encharm/Font-Awesome-SVG-PNG

还有其他svg图标

1. https://github.com/iconic/open-iconic
2. https://github.com/outpunk/evil-icons
3. 纯css图标https://github.com/saeedalipoor/icono

对于Material Design，您有静态svg图标https://google.github.io/material-design-icons/和动画：

1. http://tympanus.net/Development/AnimatedSVGIcons/
2. http://tympanus.net/Development/IconHoverEffects/
3. http://tympanus.net/Development/AnimatedCheckboxes/
4. https://alexk111.github.io/SVG-Morpheus/

Answer 11

我很惊讶没有人posted Unicode emojis：

Range U+1F600 - U+1F64F

列表中的一些：

：U+1F601: GRINNING FACE WITH SMILING EYES &#128513
 ：U+1F602: FACE WITH TEARS OF JOY &#128514
 ：U+1F603: SMILING FACE WITH OPEN MOUTH &#128515
 ：U+1F604: SMILING FACE WITH OPEN MOUTH AND SMILING EYES &#128516
 ：U+1F605: SMILING FACE WITH OPEN MOUTH AND COLD SWEAT &#128517
 ：U+1F606: SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES &#128518
 ：U+1F637: FACE WITH MEDICAL MASK &#128567

另请参阅此Supplemental list

的酷炫图标列表

☣：U+2623: BIOHAZARD SIGN &#9763
☢：U+2622: RADIOACTIVE SIGN &#9762

Answer 12

我已经使用放大镜图标作为锚点的主体来链接到一个很酷的交互式页面，进行一些数据分析，允许用户将任意数据选择配对，就像example一样。

 <a href="{{ url_for( 'interactiveParamExplorePage' ) }}" title="Explore merge column pairs.">&#x1F50E;</a>

作为一个链接，默认的下划线外观有点模糊了unicode字形，但这种影响对于我们的内部工具来说可以忽略不计，但对于公众面临的事情可能不是最理想的。