web-dev-qa-db-fra.com

L'icône Fontawesome empêche le retour à la ligne

comment puis-je empêcher une nouvelle ligne d'être insérée entre une icône fontawesome et le texte situé près de cette icône?

Voir le violon , j'ai un nbsp, mais il est jeté.

Dans l'exemple ci-dessous, je ne souhaite pas qu'un saut se produise entre l'icône et le mot "premier", mais cela peut se produire entre "premier" et "deuxième". Cela ne fonctionne pas bien, voyez le violon.

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

C'est lié à cette question, mais je n'arrive pas à le faire fonctionner:

Attache une icône de police au dernier mot de la chaîne de texte et empêche le retour à la ligne

htmlcssfont-awesome
18
falconbur

Ajouter le CSS: .fa { display:inline; }

Violon de démonstration .

19
jasonhansel

Puisque le texte que vous essayez de NE PAS envelopper n'est pas contenu dans un élément, comment CSS pourrait-il savoir où insérer ou non? La largeur de jsfiddle .test était de 20px, c'est-à-dire la même largeur (environ) de l'icône, donc je ne comprends pas vraiment. Si vous ne voulez pas que quelque chose soit renvoyé à la ligne, voici une façon de le faire: indiquez ce que vous ne voulez pas insérer dans un élément en ligne, comme une étendue, puis ajoutez la classe que vous souhaitez sur cette étendue.

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}

Démo: http://jsbin.com/rineye/2/edit

2
Christina

J'avais ce problème et la cause était que l'icône géniale de la police était automatiquement insérée dans son propre nouvel élément p. Je ne sais pas pourquoi cela se passait, mais je l'ai résolu avec ce CSS:

p { display: inline;}

Assurez-vous de spécifier quel élément p vous ciblez, afin de ne pas modifier chaque élément p de votre page!

1
alanpaulprice

Cela semble fonctionner, cliquez Run code snippet au dessous de:

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>
0
user3638471