如今,越来越多的人通过移动设备浏览Internet,因此需要调整网站上的某些内容以适应较小的屏幕尺寸。 这也包括Web导航 。
如果可以的话,下面的图标是代表“移动菜单/导航”的最受欢迎的图标。
![](https://i-blog.csdnimg.cn/blog_migrate/95591a4392433339c8e47262ba29a80c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/95591a4392433339c8e47262ba29a80c.png)
在本文中,我们将介绍添加图标的几种方法以及最简单的方法。
使用位图图像
每个人都知道如何通过位图图像进行操作。 我们可以简单地在Photoshop中创建此图标,将其保存为图像(可能为PNG或JPG格式),然后通过CSS中的background-image
进行分配。
但是,位图图像缺乏可伸缩性。 特别是,当我们必须放大图像时,它可能会变得模糊或像素化。 如今,随着市场上高分辨率设备的推出,图像可伸缩性是您不可忽视的重要因素。
引导方式
这就是前端开发框架Bootstrap以较小的屏幕尺寸显示“导航图标”的方式。 它使用三个<span>
元素:
<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 Awesome和EnTypo 。 要显示图标,我们只需添加相应的字符,如本博文中所示 。
用字体显示图标的一些优点是,该图标易于通过CSS进行更改,并且与分辨率无关。 另一方面,它也有一些缺点:根据保存的字符数,文件可能会很大,并且我们至少需要四种不同的文件格式来满足浏览器的兼容性,这需要大量工作才能显示一个图标。
“天堂的Trigram”
令人惊讶的是,有一个名为Trigram for HeavenHTML字符。 这(可能)是我找到的最佳方法。 只需将这个HTML字符( ☰
)放进去,您就应该在网页上得到这个图标。
![](https://i-blog.csdnimg.cn/blog_migrate/4ca666e5fde5bd15ab1197a68b2f1e03.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4ca666e5fde5bd15ab1197a68b2f1e03.png)
然后,我们可以使用CSS对其进行更改,例如更改颜色或调整其大小而不会损失清晰度,并且还可以链接到外部源。 此外,您可以深入该库以查找更多HTML特殊字符。