webentwicklung-frage-antwort-db.com.de

Schriftgröße nicht zu groß

Ich habe Font Awesome Icons auf this site installiert. Die Größe der Symbole wird auch nach dem Hinzufügen der Klasse zur Vergrößerung nicht erhöht.

<ul class="stay-connected-inner list-inline">
  <li><a href="#"><i class="fa fa-Twitter fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-medium fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
</ul>
9
Fahad Uddin

Verwenden Sie zur Vergrößerung der Symbolgrößen im Vergleich zum Container die Klassen fa-lg (33%), fa-2x, fa-3x, fa-4x oder fa-5x.

            <ul class="stay-connected-inner list-inline">
              <li><a href="#"><i class="fa fa-Twitter fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-medium fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
            </ul>
18
Arun

font-awesome Icons sind Texte. Verwenden Sie daher die Schriftgröße, um die Größe von Symbolen zu vergrößern.

Zum Beispiel

i {
    font-size: 18px;
}
6

wenn Sie in a Angular 5+ Schriftart Awesome oder Awesome Pro-Symbole verwenden Die einfache Möglichkeit, Ihre benutzerdefinierte Schriftgröße zu erhöhen, ist: 

.svg-inline--fa{
  font-size:1.500em; //use your custom font siz. If you do not want to apply the font awesome size classes
}

Übernehmen Sie dies in Ihrer benutzerdefinierten Komponente, um die Änderungen sofort anzuzeigen. 

0
Ragavan Rajan

verwenden Sie folgendes Inline-CSS 

<style type="text/css">
    .fa-3{
      font-size: 30px;
    }
</style>
0
Ravi Roshan

Ich hatte das gleiche Problem. Aus irgendeinem Grund überschreibt die fa-Klasse die fa-2x-Klasse in der genialen Schriftbibliothek. Ich habe ein Blog gefunden, von dem sie wussten, dass es sich um ein Problem im Jahr 2014 handelt, es aber noch nicht angegangen ist. Auf meiner Website habe ich die Stilklasse erneut hinzugefügt und! Wichtig hinzugefügt, was mein Problem behoben hat.

<style>
      .fa-2x{
        font-size:2em !important;
    };
</style>

0
Gene Potter

Bitte überprüfen Sie die Schriftgröße für die Größe von Symbolen http://fontawesome.io/examples/

Verwenden Sie zur Vergrößerung der Symbolgrößen im Vergleich zum Container die Klassen fa-lg (33%), fa-2x, fa-3x, fa-4x oder fa-5x.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
0
Jenti Dabhi