跳至正文

UI 设计:添加移动导航图标的简单方法

UI 设计:添加移动导航图标的简单方法

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

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

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

使用位图图像

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

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

引导方式

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

1个
2个
3个
4个
5个
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

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

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

使用字体图标

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

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

“天卦”

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

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

标签:

发表回复