Iconfonts von Font Awesome mit WordPress nutzen

Bildung

[et_pb_section bb_built=\“1\“][et_pb_row][et_pb_column type=\“4_4\“][et_pb_text _builder_version=\“3.5.1\“]

Font Awesome stellt Iconfonts zur Verfügung, welche man in seine Webseite einbauen kann.
Iconfonts verhalten sich wie eine Schriftart, sehen aber wie Icons aus. Man kann ganz einfach die Farbe und Größe verändern, so wie man es vielleicht aus Word kennt.

Die Iconfonts können aber auch gedreht, animiert und mit einem Rand versehen werden.

Was mit Font Awesome alles so möglich ist, wird einem auf der Beispielseite von Font Awesome  hier gezeigt.

Damit das ganze auch auf der WordPress Seite läuft, kann man entweder im Code von WordPress einige Zeilen einfügen oder man nimmt sich einfach ein Plugin. Es gibt auf  www.Wordpress.org einige Plugins zu Font Awesome und ich habe auch einige getestet und eines davon als GUT empfunden.

Das  Better Font Awesome WordPress Plugin bietet folgende Vorteile:

  • verwendet immer die aktuellste Font Awesome Version
  • im Editor wird ein TinyMCE eingefügt
  • es erlaubt auch direkt den HTML Code von der  Font Awesome Webseite
  • man kann leicht das Iconfont mit einer Class versehen (Rand, Farbe, Größe, Animation)

 

Hier mal die Codeunterschiede von \“Font Awesome\“ zu \“Better Font Awesome\“ für folgendes Iconfont:

 

 

 

 

https://gist.github.com/bpNetwork/6851bca07e540e50bf76

 

Der Shortcode von \“Better Font Awesome\“ kann auch noch abgeändert werden, wie z.B.:

für

https://gist.github.com/bpNetwork/ba75138d591196991e03

 

für 

https://gist.github.com/bpNetwork/d2c65f1daa14bce32db7

für 

https://gist.github.com/bpNetwork/a54269797e3a0509c404

für 

https://gist.github.com/bpNetwork/65ad013d5928ba5b09f2

 

Kurz noch zum Verständnis:

  • Font Awesome: stellt die Iconfonts zur Verfügung
  • Better Font Awesome: ist ein WordPress Plugin, welches auf die Iconsfonts von Font Awesome zugreift

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Nach oben scrollen