Font Awesome Icon lässt sich nicht im Header einbinden

Hallo zusammen,

ich möchte gerne ein Font Awesome Icon im Header einbinden per CSS, was bislang bei all meinen Versuchen fehlgeschlagen ist. Im Hauptteil unter "main" und der rechten Spalte unter "right" ist dies problemlos möglich. Muss im Header hierfür noch ein gesonderter Selektor im Stylesheet eingefügt werden damit das Icon dargestellt werden kann?
Im Augenblick fällt mir nur noch eine Möglichkeit ein um mein Ziel zu erreichen. Das Icon in der rechten Spalte oben einbinden und per CSS in den Header an die passende Position hochziehen. Das würde zwar funktionieren aber auf einigen Seiten wird bei uns noch zusätzlicher Inhalt darunter im Header eingeblendet und somit würde sich das Icon entsprechend auf diesen Seiten verschieben.
Gibt es irgendeine Möglichkeit oder hat jemand eine Idee wie man diesem Verhalten im Header entgegenwirken kann?
Danke!

Gruß
Thomas

Hallo,

ohne dein CSS zu kennen, würde ich mal bei der Spezifität der Selektoren ansetzen und überprüfen ob ggf. deine Ausprägung durch eine andere einfach überschrieben wird.
Font Awesome als Font eingebunden und hat somit in allen Bereichen des Layouts Gültigkeit - somit sollte es keine Rolle spielen ob du das Icon im Right, Main oder Left setzen möchtest.

Anbei der CSS-Code der unter Main und Right funktioniert aber nicht unter Header.

Code:

---

.mod_form {
z-index:2;
}

.mod_form .search_form {
margin:0;
}

.mod_form .search_form .formbody {
display:flex;
flex-wrap:wrap;
}

.mod_form .search_form input.search_field {
width:142px;
font-size:13px;
background-color:#f1f1f1;
padding:3px 24px 3px 10px;
border:5px solid #c0c0c0;
border-radius:1em;
margin:12px;
}

.mod_form .formbody  button.search_lupe {
position:absolute;
height:21px;
width:21px;
top:17px;
right:22px;
font-size:0;
border:none;
cursor:pointer;
}

.mod_form .formbody  button.search_lupe:after {
content:"\f002";
font-family: "Font Awesome 5 Free";
font-size:14px;
font-weight:400;
color:#707070;
position:absolute;
top:3px;
right:3px;
}

---

Gruß
Thomas

ich tippe mal drauf, das es ggf. die width und height sind, die Du nicht angibst.
Was sagt denn der Analyser, ist das Element im Quellcode?
Wo wird es dargestellt? und in welcher Größe?

link zur Seite?