CSS Hilfe benötigt zu Selectorenhierarchie

[Sven]

Hallo,

ich tausche gerade meine Gif-Icons aus den 2000er Jahren gegen Font-Awesome-Icons aus. Auch nicht gerade der Hit, aber etwas moderner und harmonischer.

Nun besteht aber das Problem, dass diese fa-Icons etwas unterschiedlich groß wirken und auch in Höhe nicht komplett auf einer Linie stehen, wenn ich mehrere hintereinander einsetze.

Den Icons selber kann ich ja eine Klasse vergeben, um sie ein wenig zu stylen.

Z.B.

.fa_bearbeitung {
font-size: 15px;
padding-right: 0.25em;
color: blue;
}

Wie aber muss ich nun verfahren, wenn ich weitere Selektoren hierzu benötige.

1. Je nachdem, ob das Icon aktiv oder deaktiv ist, möchte ich die Farbe ändern.
2. Je nachdem, ob das Icon etwas zu groß oder klein ist, möchte ich es den font-size ändern.
3. Je nachdem, ob das Icon zu hoch oder tief ist, möchte ich es mit vertical-align etwas anheben oder absenken.

Ich muss dafür doch sicher nicht für alle variationen eigene Klassen anlegen, oder? Und sicher auch nicht ins Element selber style='irgendwas' im Code notieren, oder?

Gibt es da eine geschickte Hierarchie, die ich nutzen könnte?

Sven