Wie kann ich bei diesem Icon die Farbe ändern in CSS 3?
Ich möchte die Farbe ändern aber es funktioniert nicht mit hover, visited, link usw. Hat jemand eine Idee? P.S. das Icon ist von Fontawesome. Mit der Frage meine ich die Lupe am rechten Rand.
1 Antwort
Die Farbe von Awesome Icons ändert man indem man die text-color farbe ändert. Ergo musst du #selector{color: red;} in dein css einfügen. Natürlich muss der Selektor sinnvoll ersetzt werden und das css sollte an anderer Stelle nicht überschrieben werden.
Im HTML machst du gar nichts. Das Icon ist schon da und Selektoren wird es ebenfalls haben. Alternativ kannst du auch in der eingebundenen css Datie von Fontawesome schauen wie die dieses Icon ansprechen oder du schaust einfach via Inspector. Achte dabei auf Pseudo Elemente wie :after oder :before
Die haben da eine class drin mehr nicht.
Hat geklappt musste die nur eine Class nehmen es hatte zwei drin.
Naja, eine Anpassung an den Kontext wäre schon klug, um auszuschließen, dass du bei anderen Vorkommen von Icons / demselben Icon nicht Probleme bekommst (und das kann, auch in der Zukunft, schnell einmal auftreten).
Ich würde dir raten, einen Selektor zusammenzubauen, der sich an deiner Suchbox orientiert. Also z.B.:
.search i:before { color: white }
wenn dein Markup bspw. so aussieht:
<form class="search">
<input name="query">
<button>
<span class="visually-hidden">Search</span>
<i class="fa fa-search">
</button>
</form>
Das empfehle ich ausdrücklich nur im Notfall !
Zum einen ist die Frage ob nicht alle Lupen - Icons eine andere Farbe bekommen sollen. Wieso sollte nur bei der Suche das Icon rot werden?
Zum anderen steckt die Lösung im Begriff css. Wichtig wäre hier das c - cascading. Höchstwahrscheinlich hat diese Suchbox schon eindeutige Selektoren. Dann kann man mittels Kaskadierung das Icon ansprechen. Das sieht dann so aus: .suchbox .icon {color: red;}
Wenn man für jede Änderung neue Selektoren einfügt hat man am Ende ein zugemülltes html in dem jedes Element eine class hat.
- In der Fragestellung ist von dem Icon die Rede, welches in der Suchbox steckt. Nicht von einem anderen. Wenn der FS nicht den richtigen Selektor zusammenbaut, werden im schlimmsten Fall alle Icons auf der Seite andersfarbig (sofern er noch andere verwendet).
- Anscheinend hast du meinen Kommentar nicht richtig verstanden, da du ihn erst ablehnst und dann im zweiten Teil genau dasselbe schreibst.
- Wenn er sich bei der Farbe verschreibt hat er auch einen Fehler. Nur um Fehler vor zu beugen muss man das html nicht mit Selektoren zuscheißen.
- Klar habe ich das und ich bleibe dabei. Er soll Selektoren benutzen die bereits existieren und erst neue erfinden, wenn es nötig ist.
Du bestätigst gerade nochmal, dass du meinen Kommentar gar nicht verstanden hast. 😁
Danke, ich weiss was du meinst aber wo soll ich den die ID einfügen in der HTML?