Ikona FontAwesome nie słucha

Witam , tak jak w temacie ikona (w zielonym kółku) nie chce słuchać poleceń w CSS, reaguje ona tylko na float right lub left , jednak to nic nie wnosi do mojej pracy i tego jak chce ją ustawić. Próbowałem również sprawdzić czy po wpisaniu polecenia "display: block;" zacznie ustawiać się według tego co piszę w CSS jednak tak się nie dzieje , warto dodać że w tym samym projekcie są dodane ikony z fontello(nie wiem czy to ma jakiś wpływ na to , jednak wolałem o tym wspomnieć)

Pokaż kod (https://stackoverflow.com/help/minimal-reproducible-example).

Patryk27 napisał(a):

Pokaż kod (https://stackoverflow.com/help/minimal-reproducible-example).

interesuje Cię sam CSS tej ikony czy coś więcej podrzucić ?

Interesuje mnie MRE, czyli pełna najkrótsza wersja Twojego kodu, która nadal wykazuje ten problem.

Patryk27 napisał(a):

Interesuje mnie MRE, czyli pełna najkrótsza wersja Twojego kodu, która nadal wykazuje ten problem.

W załączniku folder z fragmentem strony + screen, tak jak widac na screenie ikonka cały czas jest wyżej niż mój input , nie potrafię tego obniżyć- wpisując margin-top: ; ikonka nie przemieszcza się wewnątrz diva "icon-holder" tylko go rozciąga i dalej jest ponad inputem...

Jeśli otworzysz sobie tę swoją stronkę w konsoli przeglądarki (skrót F12) i najedziesz w drzewie DOM na Twój input, zobaczysz:

(żółty prostokąt reprezentuje tutaj input oraz jego margin-bottom)

Teraz spójrz co się stanie wtedy, gdy do ikonki dodamy margin-top:

Dzieje się tak dlatego, że:

• fakt 1: input, ponieważ ma display:block, zajmuje całą szerokość jego rodzica (tj. całą szerokość <div class="icon-holder">),
• fakt 2: dwa równorzędne elementy (tutaj: i oraz input) nie mogą na siebie najeżdżać (bez wykorzystania float).

Stąd jedynym wyjściem (z punktu widzenia przeglądarki) jest zwiększenie szerokości rodzica (.icon-holder).

Aby zostało to wyświetlone tak, jak chcesz, sugerowałbym:

<div class="icon-holder">
  <div class="input-with-icon">
    <i class="fas fa-envelope-open-text" id="mail-icon" aria-hidden="true"></i>
    <input placeholder="Adres e-mail" type="text" id="input1" class="input-underline">
  </div>
</div>

<style>
.input-with-icon {
  display: flex;
  padding: 15px;
}

.input-with-icon input {
  flex-grow: 1;
}
</style>

Aby się przekonać, dlaczego to działa, poczytaj o css flexbox :-)

Ostatecznie - po paru dalszych usprawnieniach, które zostawiam jako zagwozdkę dla czytelnika - osiągnąłem:

Btw: rzuć okiem na Bootstrapa - to, co próbujesz osiągnąć, tam nazywa się input-group-prepend.

@Patryk27: Dzięki za tak wyczerpującą odpowiedź , jeszcze nad tym pokminię i się nauczę jak robić to poprawnie :D Btw. Bootstrap będzie dobry na pierwszy kontakt z frameworkiem ?

Bootstrap będzie dobry na pierwszy kontakt z frameworkiem ?

Tak, jak najbardziej :-)