Formatieren mit css

[Pit]

Hallo Rolf,

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

... und irgendwie finde kein Tutorial, wo die nicht verwendet werden 😟

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"; 
}

Schade, das versteh ich nicht. Die Pseudoklasse "before" schon, aber den Icon-Content "\f05a" nicht.

Ich habe in der Zwischenzeit mal selber an der Lösung gemäß Gunnars Vorschlag gearbeitet. Dabei habe ich blöderweise das Ausgangs-Codepen überschrieben...ich dacht, dass das so hochzählt, wie bei jsfiddle.

Pit