Jak zablokować ikonę podczas zmiany okna przeglądarki w Bootstrap 4?

Hej, zrobiłem swój formularz do logowania i rejestracji i chciałbym dodać jakieś ikonki przy odpowiednim napisie. O ile udało mi się je zaaplikować i umiejscowić w odpowiednim miejscu, to niestety, ale podczas zmiany okna przeglądarki ikonki nie podążają za swoim miejscem. Jeśli je ułożę mając przeglądarkę otwartą na całym oknie, to jest ok, bo tak je dopasowałem, ale jak zmniejszam okno przeglądarki, to formularz logowania i rejestracyjny fajnie się zmniejsza, dostosowuje się do okna przeglądarki, ale ikony już nie i zostają gdzieś w tyle. Żeby wróciły na swoje miejsce to znowu muszę przywrócić pełne okno.

Kawałek kodu odpowiedzialny za ikonki i ich umiejscowienie:

W HTML:

<i1 class="fa fa-user"></i1>
<i2 class="fa fa-lock"></i2>

W CSS:

i1{position: absolute;
        left: 615px;
        top: 109px;
        font-size: 18px;}

    i2{position: absolute;
        left: 615px;
        top: 163px;
        font-size: 18px;}

Na razie tak je ustawiłem, muszę coś dodać, żeby rozwiązać problem? Dodam, że wpisywałem w google frazy typu "How to block icons bootstrap", ale nie znalazłem tego co szukałem. Szczerze powiem, że nie wiem jak to zrobić. Przez wiele godzin sprawdzałem gotowe rozwiązania, kasowałem linijka po linijce, zmieniałem każdą wartość sprawdzając co się dzieje na różnych przykładach. Dzięki temu w końcu zrozumiałem jak coś działa i zbudowałem swoje formularze, ale niestety z ikonkami nie jestem w stanie sobie poradzić.

Masz obiekty spozycjonowane absolutnie:

position: absolute;
left: 615px;
top: 109px;

Więc się nigdzie nie ruszają niezależnie od zmian rozmiaru strony.
Umieść je w kodzie przy napisach bez żadnych cudów i będziesz miał.

<div class="form-group">
            <i1 class="fa fa-user"></i1>
            <input type="text" class="form-control" placeholder="Username" required="required">
        </div>

Domyślnie miałem tak, wtedy ikonka jest nad placeholder. Jeśli i1 class będzie nad /div, to będzie pod placeholder. Niestety, próbuję, ale nie potrafię sobie poradzić. Zrobiłem też według tego poradnika, ale zamiast ikonem jest pusty kwadrat. Link odpowiedni dałem na pewno:

i1, i2 {
  display:inline-block;
}

Powinno pomóc.

Yyy, że tak spytam te tagi i1 i i2 to jakieś nowe standardy czy customowe tagi i przeglądarka je po prostu "jakoś" tam interpretuje? Pytam tylko dlatego, bo osobiście dałbym tam <i> i tyle.