Schriftart Awesome Stacked Icon Größe

Ich kann nicht scheinen, die Größe der font awesome Symbole in einem gestapelten Satz zu ändern. Ich möchte, dass die Icons kleiner sind, als sie es momentan sind.Schriftart Awesome Stacked Icon Größe

Muss ich eine zusätzliche CSS-Regel erstellen?

Mein Code ist bis jetzt;

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x icon-background4"></i> 
    <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
    <i class="fa fa-lock fa-stack-1x"></i> 
</span> 

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
    <i class="fa fa-camera fa-stack-1x"></i> 
</span>

CSS

.icon-background4 { 
    color: #c0ffc0; 
} 

.icon-background6 { 
    color: #40c040; 
} 

.icon-background5 { 
    color: #c0c0ff; 
}

Fiddle.

Hinweise

Ich will nicht Inline-Styling in dem HTML-Code verwenden.
Ich möchte äußeren Kreis die gleiche Größe

Jede Hilfe sehr geschätzt wird bleiben.

Quelle

2017-11-23 TheOrdinaryGeek

Sie haben versucht, font-size verwenden? –

Es ist, weil Ihre Spannweite um sie Breite haben: 2em und Ihre Symbole haben Breite: 100% KLASSE: .fa-stack-2x { Position: absolute; links: 0; Breite: 100%; Textausrichtung: Mitte; } – Goku

Sie können Klasse für kleinere Schriftart hinzufügen 'fa-1'' fa-2''fa-3' –

Aktualisiert Antwort Kommentar zu beantworten:

font-awesome Icons ist eine Schriftart und keine Grafiken. So kann es durch einfache Verwendung font-size

Größe angepasst werden Wenn Sie die integrierten Klassen hinzufügen, wendet Sie nur die CSS-Eigenschaften über eine Klasse.

Ich muss !important hinzufügen, sonst funktioniert es nicht. Vielleicht könnte es verbessert werden, aber man kann sehen, wie es im Code Geige arbeitet

.icon-background4 { 
 
    color: #c0ffc0; 
 
} 
 

 
.icon-background6 { 
 
    color: #40c040; 
 
} 
 

 
.icon-background5 { 
 
    color: #c0c0ff; 
 
} 
 

 
.fa-camera { 
 
    font-size: 10px; 
 
} 
 

 

 
/* */ 
 

 
.test-icon-size { 
 
    font-size: 15px !important; 
 
} 
 

 
.test-icon-size-2 { 
 
    font-size: 40px !important; 
 
} 
 

 
.test-icon-size-3 { 
 
    font-size: 60px !important; 
 
}

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

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size"></i> 
 
</span> 
 

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size-2"></i> 
 
</span> 
 

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size-3"></i> 
 
</span>

Quelle

2017-11-23 11:17:03

Danke @ Sébastien Gicquel, aber ich möchte die Größe des Symbols ändern * nur *. Ich möchte, dass der äußere Kreis die gleiche Größe behält. – TheOrdinaryGeek

@TheOrdinaryGeek Ich habe meine Antwort aktualisiert. Ist es besser für dich? Wenn es das gewünschte Ergebnis ist, werde ich versuchen, den Code zu verbessern. –

-1

Versuchen Sie mit untenstehenden Code.

<span class="fa-stack fa-2x"> 
    <i class="fa fa-circle fa-stack-2x icon-background4"></i> 
    <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
    <i class="fa fa-lock fa-stack-1x"></i> 
</span> 

<span class="fa-stack fa-2x"> 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
    <i class="fa fa-camera fa-stack-1x"></i> 
</span>

Quelle

2017-11-23 10:57:52

Statt <span class="fa-stack fa-5x">, versuchen fa-2x oder 3x wie pro Ihre Anforderung. Wenn Sie eine Standardgröße wünschen, entfernen Sie fa-5x vollständig aus dem übergeordneten Span-Tag.

Quelle

2017-11-23 11:13:06 Ankit

Schriftart Awesome Stacked Icon Größe

Antwort

Verwandte Themen