Fontawesome 图标可防止换行符

Question

如何防止在很棒的图标和该图标附近的文本之间插入换行符？

看fiddle，我有一个nbsp，但是被丢弃了。

在下面的示例中，我不希望在图标和单词“first”之间出现换行，但它可以出现在“first”和“second”之间。但它不起作用，请参阅小提琴。

  <i class="fa fa-search"></i>&nbsp;first second

它与这个问题相关，但我似乎无法使它工作：

将字体图标附加到文本字符串的最后一个单词并防止换行

Answer 1

添加CSS：

.fa { display:inline; }

演示小提琴。

Answer 2

由于您尝试不换行的文本不在任何元素内，那么 css 如何知道在哪里换行或不换行？ jsfiddle .test 的宽度是 20px，与图标的宽度（大约）相同，所以我不太明白。如果您不想包装某些内容，这里有一种方法，将您不想包装的内容包装在内联元素（例如跨度）中，然后在该跨度上添加您想要的类。

HTML Abcdef ghijklmnopqrstuvwxyz

CSS：

.test {
    width: 100px; /*20px is too small the icon is 20px (approx) you need more space */
}

.test span {white-space:nowrap}

演示：http://jsbin.com/rineye/2/edit

Answer 3

我遇到了这个问题，原因是 font Awesome 图标被自动插入到它自己的新 p 元素中。我不知道为什么会发生这种情况，但我用这个 CSS 解决了它：

p { display: inline;}

确保指定要定位的 p 元素，这样就不会更改页面上的每个 p 元素！

Answer 4

这似乎有效，请单击下面的运行代码片段：

body {
  text-align: center;
}

.resizable-wrapper {
  border: solid 1px black;
  resize: both;
  overflow: auto;
}

.item {
  position: relative;
  padding-left: 20px;
}

.item + .item {
  margin-left: 20px;
}

.fa {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="resizable-wrapper">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="item"><i class="fa fa-flag"></i>Lorem</span> <!-- lots of these -->
<span class="item"><i class="fa fa-flag"></i>ipsum</span>
<span class="item"><i class="fa fa-flag"></i>dolor</span> <span class="item"><i class="fa fa-flag"></i>sit</span> <span class="item"><i class="fa fa-flag"></i>amet,</span> <span class="item"><i class="fa fa-flag"></i>consectetur</span> <span class="item"><i class="fa fa-flag"></i>adipiscing</span> <span class="item"><i class="fa fa-flag"></i>elit.</span> <span class="item"><i class="fa fa-flag"></i>Proin</span> <span class="item"><i class="fa fa-flag"></i>rutrum</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>eget</span> <span class="item"><i class="fa fa-flag"></i>justo</span> <span class="item"><i class="fa fa-flag"></i>tempor</span> <span class="item"><i class="fa fa-flag"></i>ornare.</span> <span class="item"><i class="fa fa-flag"></i>Sed</span> <span class="item"><i class="fa fa-flag"></i>aliquam</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>sed</span> <span class="item"><i class="fa fa-flag"></i>quam</span> <span class="item"><i class="fa fa-flag"></i>facilisis</span> <span class="item"><i class="fa fa-flag"></i>fringilla.</span> <span class="item"><i class="fa fa-flag"></i>Pellentesque</span> <span class="item"><i class="fa fa-flag"></i>habitant</span>

</div>

Answer 5

在 2024+ 中，在当前版本中，您可以使用 CSS 变量为各种 Font Awesome 图标设置它，无论使用什么类：

:root {
  --fa-display: inline;
}

请参阅定制文档。