当我尝试将新的bootstrap图标添加到按钮中时,似乎图像有些偏移:
我可以在底部添加一个边距,但这似乎太过于“变通”。如果我检查https://icons.getbootstrap.com/icons/x-circle/上的代码,他们也没有使用任何变通方法,但看起来效果如预期。
这是我如何添加我的按钮的方式:
<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
我注意到一个小差别,如果通过icon字体获取图标而不是svg,它会在图像上方添加一些空间,无法通过任何填充控件来去除。
我按照“安装”说明逐步操作,其他组件的工作都正常。同时font-awesome也能很好地使用。
有什么想法可以解决这个问题吗?
编辑:非常感谢大家迄今为止的回复。我已经阅读了所有回复:
@vishal:
<div style="text-align:center; width:100%;">
<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
</div>
@George:
<a href="#" type="button" class="d-flex justify-content-center align-items-center col-12 btn btn-danger"><i class="bi bi-x-circle pr-2"></i> Cancel</a>
这里我需要将col-1扩展到col-12,但结果是出现了这个按钮:
@camaulay: 如果我使用SVG并进行宽度和高度的调整(将两者都设置为20),并将viewbox定位调整为“0 0 20 20”,实际上结果看起来与预期相同:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 20 20">
因此,我可以将其标记为正确答案。尽管如此,我想知道为什么 <i>
标签会导致这种奇怪的行为?
如果我将边框类添加到“图片”,那么就会看到图像顶部有一些额外空间:
<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle pr-2 border"></i> Cancel</a>