现在越来越多的人通过移动设备上网，因此需要调整网站上的一些内容以适应这些较小的屏幕尺寸。这也包括Web 导航。

如果可以的话，下面的图标是代表“移动菜单/导航”的最流行的图标。

在这篇文章中，我们将了解几种添加图标的方法以及哪种方法最简单。

推荐阅读： 设计一个成功的导航菜单：想法和灵感

使用位图图像

每个人都知道如何通过位图图像来完成。我们可以简单地在 Photoshop 中创建这个图标，将其保存为图像（可能是 PNG 或 JPG 格式），然后background-image在 CSS 中分配它。

然而，位图图像缺乏可伸缩性。特别是，当我们必须放大图像时，它可能会变得模糊或像素化。随着当今市场上高分辨率设备的可用性，图像可扩展性是您不容忽视的一个重要因素。

引导方式

这就是前端开发框架Bootstrap在较小屏幕尺寸下显示“导航图标”的方式。它使用三个<span>元素：

尽管可以通过样式实现所需的图标，但仅显示这个小图标的额外标记被认为是多余的（特别是如果我们遵守“最佳实践”）。

因此，让我们找到一种需要更少标记的更好方法。

使用字体图标

另一种方法是使用字体图标。有几种字体在其集合中提供了此图标，例如Font Awesome和EnTypo。要显示图标，我们只需添加相应的字符，如本文所示。

用字体显示图标的一些优点是图标很容易通过 CSS 更改并且与分辨率无关。另一方面，它也有一些缺点：根据保存的字符数，文件可能会非常大，而且我们至少需要四种不同的文件格式来满足浏览器兼容性，而仅显示一个图标需要大量工作。

“天卦”

令人惊讶的是，有一个 HTML 字符称为天卦。这是（可能）我能找到的最好方法。只需输入此 HTML 字符 ( ☰)，您的网页上就会出现此图标。

然后我们可以用 CSS 改变它，比如改变颜色或调整它的大小而不失去清晰度，也可以链接到外部资源。此外，您可以深入了解此库以查找更多 HTML 特殊字符。