在 HTML 中将图标和单词保持在同一行

Question

我在网站上的链接旁边使用了 Font Awesome 图标，但我不知道如何强制链接的第一个词与图标保持在同一行。

这是一个 JSFiddle 示例 http://jsfiddle.net/un5hwhca/

我正在尝试使用   将它们放在一起，但它并没有起到作用，正如您在屏幕截图中看到的那样，它只是被推到下一行的开头。

Answer 1

将此 CSS 添加到您的 link:

style="white-space: nowrap;"

[Updated fiddle]

或者如果您只想将图像和第一个词粘在一起，但让 link 的其余部分环绕，将图像和第一个词放在 span 中并应用改成那个风格，比如

<a href="https://en.wikipedia.org/wiki/Asteroids_(video_game)" target="_blank">
    <span style="white-space: nowrap;">
        <i class="fa fa-external-link"></i>
        some
    </span>
    very interesting Asteroids
</a>

[Fiddle]

在 HTML 中将图标和单词保持在同一行

Keeping an icon and a word on the same line in HTML

html

css

font-awesome