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

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

Ansophie

Mitglied
17 August 2019
100
2
18
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Ich vermute, Du möchtest, dass im Ruhezustand nur die Icons sichtbar sind und die Texte rechts verdeckt?
In dem Fall schlage ich folgendes vor:
Wie schon oft geschrieben, den überflüssigen wrapper entfernen; Dinge wie body, nav, ul etc. sind nicht tabu für styling.
Dann die Breite der Texte im Ruhezustand auf 0 setzen. Dann kann man right: 0; setzen und es sind automatisch, ohne dass man Maßangaben austarieren muss, nur die Icons sichtbar.
Dann beim Hover die Breite fuer die Texte einstellen. Hier offenbart sich ein kleiner Nachteil dieser nur-CSS-Lösung: Die Breite muss man absolut fest legen, denn nach auto als Ziel kann man nicht animieren.
Sieht dann so aus:
 

basti1012

Senior HTML'ler
26 November 2017
1.445
150
63
39
Minden
sebastian1012.bplaced.net
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:

Neueste Beiträge