如何在所有换行符上使用相同填充的SVG图标旁边放置文本?

时间:2017-08-22 07:42:44

标签: html css svg

我需要将文字放在图标旁边,但我该怎么办呢? 如果我对它应用填充,它只适用于文本的第一行。

二手代码:

<div style="font-weight:400;font-size:14.5px;color:#212121">
<span class="uk-margin-small-right-info uk-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="25" height="25" style="margin-top:-2px"><g><path d="M128 19.4C68 19.4 19.4 68 19.4 128S68 236.6 128 236.6 236.6 188 236.6 128 188 19.4 128 19.4zm0 228.6C61.7 248 8 194.3 8 128S61.7 8 128 8s120 53.7 120 120-53.7 120-120 120z"/><path d="M122.3 99.4h11.4v85.7h-11.4zM122.3 73.7h11.4V88h-11.4z"/></g></svg></span>Lorem rhoncus adipiscing ridiculus a lundium in et, dolor, pulvinar pid! Mauris enim nec pulvinar, magnis quis mid magna pellentesque? A etiam, aliquet rhoncus, magna lacus elementum</div>

它应该如何显示: enter image description here

看起来像atm: enter image description here

使用的CSS是:

.uk-margin-small-right-info {
  margin-right: 10px !important;
  display: inline-block
}

1 个答案:

答案 0 :(得分:1)

看看这个小提琴:https://jsfiddle.net/webdsdyL/。我们的想法是使用float:left并在文本元素上设置宽度。