• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Side buttons mit fontawesome - Problem mit Darstellung - Browserunterschiede und font-size

Ansophie

Mitglied
Hi,

Falls sich jemand wundert: Dieser Thread war ursprünglich zum Thema "Umsetzungswege für fontawesome". Da eh keine Antworten gegeben wurden, habe ich Thread und Titel umgearbeitet, weil sich meine Fragestellung verändert hat und hoffe, dass mir jemand dazu etwas sagen kann.

Das ist der Code zu den Side Buttons: https://codepen.io/AnSophie/pen/GRovPMz

In meiner lokalen Datei sind die icons über die Datei "all.css" und den Ordner "Webfonts" (download von der fontawesome website) eingebunden.
Ersatz auf Codepen über den link cloudflare.

Den Code habe ich in visual studio code bearbeitet und über safari im live preview getestet - dort war alles so wie gewünscht, beim Test in Chrome leider nicht: side buttons zu weit eingezogen oder wie im codepen zu sehen zu weit draußen.

1) Wie kommt diese unterschiedliche Darstellung zustande, liegt das an der all.css oder ist das margin falsch eingestellt? wo muss nachjustiert werden, damit es in jedem browser gleich ist?

2) Ist es möglich, die Größe der Icons und der Schrift unabhängig voneinander zu bestimmen? Wenn ja, wie?
Habe zunächst probiert "fa-2x" zu ergänzen, wenn ich aber dann die Schriftgröße separat bestimmen will, verschwindet der button komplett oder fa-2x wird durch die zweite Schriftgröße überschrieben.

bitte um Hinweise.
lg
 
Zuletzt bearbeitet:
Werbung:
2) Ist es möglich, die Größe der Icons und der Schrift unabhängig voneinander zu bestimmen? Wenn ja, wie?
Habe zunächst probiert "fa-2x" zu ergänzen, wenn ich aber dann die Schriftgröße separat bestimmen will, verschwindet der button komplett oder fa-2x wird durch die zweite Schriftgröße überschrieben.

Meinst du das so .
Wenn du hier den <a>
HTML:
<li class="btn_call">
     <a href="#"><i class="fa fa-phone"></i>1234/567 89 10</a>
</li>
eine font-size:40px geben würdest , das <i> aber klein bleiben soll ?
Dann könnte man <a> erst groß machen und <i> wieder klein machen
CSS:
.btn_call a{
     font-size:40px;
}
.btn_call a i{
  font-size:20px !important;
}
Nicht die beste Lösung.
Deswegen wäre es wohl besser das <i> aus den <a> zu holen
HTML:
<li class="btn_call">
      <i class="fa fa-phone"></i>
      <a href="#">1234/567 89 10</a>
</li>
mit der Css
CSS:
.btn_call{
    display:flex;
}

.btn_call i{
    font-size:20px;
    color:white;
}

.btn_call a{
    text-decoration:none;
    font-size:40px;
    color:white;
}
 
Werbung:
Zurück
Oben