wake-up-neo.net

Leerzeichen zwischen Link und Symbol, fontawesome

Was ist der beste Weg, um ein Leerzeichen zwischen dem Link/Absatz und dem Symbol zu erhalten? 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

Funktioniert nicht, um ein Leerzeichen vor den Text einzufügen, da es beim Minify/uglify des Projekts wieder geändert wird. 

Ich habe es mit allen Arten von Polsterung und Rändern versucht. Ich kann sie nicht dazu bringen, sich zu trennen. 

37
Joe

Ich würde die .fa-fw-Klasse verwenden. Zum Beispiel: <i class="fa fa-cog fa-fw"> Dies fügt einen visuellen Raum hinzu (der nicht herausgestrippt wird) und der konsistent ist. Wenn also die Elemente gestapelt werden, sieht es viel besser aus.

Anweisungen: http://fortawesome.github.io/Font-Awesome/examples/enter image description here

78
Christina

Ich weiß nicht, ob es das Beste ist, aber Sie können dem Element i etwas margin-right hinzufügen:

i {
  margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

10
user2019037

Ich denke, i ist display: inline, also müssen Sie ihre display auf inline-block setzen, damit margin-right funktioniert:

i {
  display: inline-block;
  margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

7
sodawillow

Alte Frage, aber ich mochte keine dieser Antworten, also habe ich es so gemacht:

 <i class="fa fa-cloud"></i> <span class="ml-1">Resume</span> 

Ich hasse CSS oder Dirty-HTML und arbeite lieber nur mit Klassen, aber fa-fw ist bei einigen Icons nicht sinnvoll. Ich bin nicht sicher, ob die Spannweite der Weg ist, aber in meinem Projekt sieht es gut aus.

So können Sie Ihren Text einfach um etwas wickeln und ihm einen Rand in die gewünschte Richtung geben.

2
Eduard

Da ich gerade auf die gleiche Frage gestoßen bin, habe ich Christinas Vorschlag von der Beispielseite "Font-awesome" aus betrachtet (sorry, ich darf noch nicht kommentieren).

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

Die meiste Entfernung wird hier durch &nbsp; ( siehe Bildschirm 1 ) und nicht durch fa-fwsiehe Bildschirm 2 erreicht, da dies nur die Breite des Schriftzeichensymbols selbst vereinheitlicht für beides gehen.

&nbsp; (das dann als Leerzeichen interpretiert wird) sollte auch beim Minimen aufgrund einiger schneller Tests keine Probleme verursachen.

Verwenden Sie einfach dieses:

a > i{
  padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply  "></i>Change</a>

1
Rafiqul Islam

Es gibt zwei Felder, die Sie hinzufügen müssen, damit die Benutzeroberfläche gut aussieht. Zuerst vor dem Symbol und ein wenig Platz zwischen dem Symbol und dem Textfeld.

Für den ersten Fall müssen Sie eine fantastische Klasse font hinzufügen

fa-fw

klasse. Für den zweiten Fall brauchen wir nur ein Non-Breaking Space .

& nbsp

Auf diese Weise müssen Sie keine zusätzliche Klasse hinzufügen.

Nachfolgend finden Sie einen Beispielcode, um dies zu erklären. 

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
0
Harshit Pant

Keine der Antworten funktionierte für mich. Ich musste das tun:

<i class="fa fa-reply"><span>Change</span></i>

i span {
  display: inline-block;
  margin-left: 0.3rem;
}
0