在HTML中放置简单图标的最佳透视方法是什么？

Question

我在一个带有移动菜单的网站上工作，因此必须在其中使用一个汉堡包图标。

我发现了3种方法：

  

1. 使用FontAwesome或类似的库
2. 使用SVG
3. 使用三个竖线字符

我从选项中排除，因为Font awesome库是一个很大的库，仅使用一个简单的图标即可。因此，我找出了以下特征：≡。所以我想：“天哪，我只需要把它放在HTML上就可以了！”
但是我当时想这可能太容易了。所以我不得不来这里问你们：这是正确的吗？浏览器是否大规模支持此功能？有没有更好的方法来使用简单的图标？

谢谢！

Answer 1

确实没有正确的答案，但是如果您只需要三行，这是一个简单的解决方案。

.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{

top:-4px;
}

<button class='burger'></button>