时间戳

首页 > 解决方案 > 如何将svg图标内联与boostrap中的文本对齐？

html - 如何将svg图标内联与boostrap中的文本对齐？

问题描述

https://jsfiddle.net/a7uxLkyt/

我只想在线显示文本和图标。我究竟做错了什么？是class="d-inline"正确的吗？

<div>
        <div class="d-inline">inline text</div>
        <div title="Test" class="d-inline" style="fill:grey">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M14.7071,1.29289075 .... see fiddle"/>
            </svg>
        </div>          
</div>

标签： htmlcsstwitter-bootstrap

解决方案

你的代码看起来不错！唯一剩下的就是 SVG 的大小。请定义其大小或使用一些 CSS 代码，例如：

svg {
  width: 40px;
}

推荐阅读