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

Question

我在一个有移动菜单的网站上工作，所以不得不使用汉堡图标。

我找到了3种方法：

1. 使用FontAwesome或类似的库
2. 使用SVG
3. 使用三小节字符

我将其从选项中排除，因为Font真棒库是一个非常大的库，只需使用一个简单的图标即可。所以我算出了这个特征：≡。所以我想："天哪，我只要把它放在我的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>