#1

Alain_D

Forum-Topsponsor  (370 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.brv-breitensport.de

Gerade Ausrichtung bei Font Awesome Icons unterschiedlicher Breite

Liebe Community,

als besonderes Feature bieten die Siquando 9 Templates von KARO (siquando-designs.de) die Möglichkeit, sogenannte Font Awesome Icons in Listen, Links, in der Navigation oder per BB-Code einzubinden. Auch unser Forum unter Ribbl ist mit solchen Icons reichlich verziert und liegt damit voll im Trend.

Die Einbindung solcher Icons in den Templates von KARO erfolgt grundsätzlich mit einem Code nach dem Muster [fa=icon][/fa]. Werden jedoch in Listen oder untereinander aufgeführten Texteinträgen (z.B. in der Navigation oder in Tabellen) Icons unterschiedlicher Breite mit diesem Standardcode vorangestellt, so führt dies zu einer unschönen Darstellung, da die einzelnen Zeilen bzw. Texteinträge nicht gerade untereinander ausgerichtet sind (siehe Beispiel A). Dieser Effekt lässt sich korrigieren, indem jedem Icon eine fixe Breite mit dem Zusatz fa-fw mitgegeben wird. Der Code lautet dann [fa=icon fa-fw][/fa] (siehe Beispiel B).

 Ausrichtung_Font_Awesome_Icons

#2

ofensepp

Forum-Sponsor  (429 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ebersberger-forst.com

Hallo Alain,

danke für die Info 😃

#3

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

#4

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Guter Tipp, Alain! Spart separates CSS (es ist ja quasi solches).

Im Zusammenspiel mit der fontawesome.exe von Robert aus unserem Files-Bereich wirklich eine tolle Sache und prinzipiell ein MUSS für alle Menüs usw. in den KARO-Designs.

Und in unserem neuen Forum sowieso. 😉


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#5

Alain_D

Forum-Topsponsor  (370 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.brv-breitensport.de

@ Michael,

wie du vermutlich sofort erkannt hast, ist mein Beispiel A nicht völlig aus der Luft gegriffen 😉

 

@ Volker,

die Vorzüge und Benutzerfreundlichkeit der fontawesome.exe von Robert, die hier im Forum vorgestellt wurde, weiß ich immer wieder zu schätzen. Erst mit diesem Tool werden die vielfaltigen Möglichkeiten bei der Einbindung von Icons überhaupt deutlich.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Alain_D« (11.02.2018, 19:09)
#6

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

#7

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

591 Aufrufe | 7 Beiträge