icons in pseudo-element ::before ::after content

With CSS3 you can use content property of any pseudo-element, like ::before or ::after. By utilizing this property you can easily implement basic icons for you HTML-markup.
There are in total 18+ icons and symbols available out of the box!




[element]::before {
  content: "\00a0"; /* space */
  content: "\0020"; /* space */
  content: "\203a"; /* simple left quote */
  content: "\00ab"; /* double left quote */
  content: "\00bb"; /* double right quote */
  content: "\24d8"; /* circle with small letter i */
  content: "\25b2"; /* triangle up */
  content: "\25bc"; /* triangle down */
  content: "\25e6"; /* very small thin outline circle */
  content: "\25cb"; /* small thin outline circle */
  content: "\26ac"; /* small normal outline circle */
  content: "\2014"; /* long dash before cite */
  content: "\24e7"; /* circled small letter x */
  content: "\2611"; /* ballot box with check */
  content: "\2612"; /* ballot box with x */
  content: "\229b"; /* circle with asterisk */
  content: "\2740"; /* white outlined flower with 5 petals */
  content: "\2741"; /* black flower with 8 petals */
}