Formatieren mit css

[Rolf B]

Hallo Gunnar,

die <i> als Icons ist eine Font-Awesome Seuche :(

Meine Idee wäre ja Flexbox gewesen, aber wenn man schon mit position:absolute arbeitet, dann sollte man doch einfach von FA das CSS inkludieren, statt die FA-Klassen zu verwenden. Es sei denn, es gibt irgendeine schlaue neue CSS Formulierung, mit der ich in einer Regel angeben kann, dass er bitte alles hinzunehmen soll das für den Selektor ".foo" gilt?

Also so:

<div class="mySign-msg info-msg">     <!-- Zwei Klassen, um weniger CSS zu schreiben!
  This is an info message.<br>
  Line 2
</div>

.mySign-msg {
  margin: 10px 0; position: relative; 
  padding: 10px 10px 10px 2em;
  border-radius: 3px 3px 3px 3px;
}
.mySign-msg.info-msg {
  color: #059; background-color: #BEF;
}
.mySign-msg::before {
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
  position:absolute; left: 0.5em; top:11px;
}
.mySign-msg.info-msg::before {
   content:"\f05a"; 
}

Die übrigen Message-Typen entsprechend angepasst. Damit wäre das Icon komplett aus dem Markup verschwunden. Es ist ja eigentlich Deko. Oder? Die Frage, was ein Screenreader aus einem FA Icon macht, kann ich eh nicht beantworten, aber was sinnvolles wird's vermutlich nicht sein.

Rolf