您在您的网站中使用啥 Unicode 字符？ （而不是图像图标）

Posted 2023-02-24

【中文标题】您在您的网站中使用啥 Unicode 字符？ （而不是图像图标）

【英文标题】：What Unicode character do you use in your website? (instead of image icons)您在您的网站中使用什么 Unicode 字符？ （而不是图像图标）

【发布时间】：2010-11-23 10:45:33

【问题描述】：

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

编辑：

最爱：❤

草稿：✍

消息：✉

【问题讨论】：

这个问题如果加上：这些字符在不同平台上的支持情况如何？

这是一个真实的问题，但属于 serverfault.com

我不同意——如果它属于任何地方，它就在这里。

没有可能正确答案的主观问题至少应该是社区维基。

如果this other question 已关闭，那么这个也应该关闭。

【参考方案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 手表 ⌛ U+0231B 沙漏 ♟ U+265F 实心棋子 ⚷ U+26B7 巨浪 ★ U+2605 实心之星 ✓ U+2713 复选标记 ☑U+2611方形复选框 ✕ U+2715 乘法 X ☒ U+2612 方形 X-ED 盒子 ⚠ U+26A0 警告标志

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

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

【参考方案2】：

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

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

作为一个链接，默认的下划线外观在某种程度上掩盖了 unicode 字形，但这种效果对于我们的内部工具来说可以忽略不计，但对于面向公众的东西来说可能不是最佳的。

【参考方案3】：

我很惊讶还没有人有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

【参考方案4】：

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

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

还有其他的svg图标

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

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

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

【参考方案5】：

Twitter Bootstrap 使用 × (×) 作为关闭按钮。

【参考方案6】：

我使用了方块箭头： U+25b2 ▲, U+25ba ►, U+25bc ▼, U+25c4 ◄

【讨论】：

你可以把它们粘贴在这里；）

【参考方案7】：

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

【参考方案8】：

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

【参考方案9】：

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

【讨论】：

在我当前的系统上，U+231B 和 U+2328 没有像您在此处记录的那样显示，其余的看起来真的很糟糕。

U+231B 在这里不起作用（Ubuntu 9.04）。 U+2706、U+260F和U+270E没有区别，只剩下U+2709、U+260E和U+2328并用。

在 Windows（Win7、Chrome）上查看此答案我发现大多数图标看起来很难看，最后两个图标不见了。看来 Ubuntu 的整个 Unicode 范围覆盖率比标准的 Windows 安装要好得多。

Windows XP / Firefox3.5，只有 U+231B 不可见，尽管在那个尺寸下它们看起来都很糟糕。不过，增加字体大小可能会有所帮助。

Mac OS X Mountain Lion 上的 Safari 上一切正常 img829.imageshack.us/img829/3287/screenshot20121214at528.png

【参考方案10】：

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

【参考方案11】：

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

【讨论】：

这实际上不是整个列表。您应该访问 unicode.org 获取整个列表。

【参考方案12】：

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙

仅举几例......