font-awesome icons direkt in HTML ohne CSS
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
achtung
ansicht
array
ausgegeben quellcode
code
dom
file
http
klasse code
laden
letzter punkt
machen
ordner
schleife
semikolon
sonderzeichen
tauschen
url
verwenden
vorteil
-
Hallo
ich habe mal für font-awesome eine Seite gebaut, mit der man für alle Icos
auch einen HTML-Code (Sonderzeichen als HEX oder DEC) bekommt.
dazu habe ich die Icons zuerrst als (PHP) Array angelegt und dieses
in einer Schleife (foreach) dann mit Codes in Tabelle ausgegeben.
Quellcode siehe hier: http://goo.gl/uss4FP oder hier http://pastebin.com/JTduRBW9
und hier auch als Ansicht der Ausgabe im Browser
hier: http://codingground.tutorialspoint.com/user37476/root/index.htm
denn ich fand es blöd, dass man es nur mit CSS verwenden kann,
.... jetzt kann man die ICONs auch direkt in HTML als Sonderzeichen machen
BSP: bed
a) Hexa-Dezimal (HEX):
b) oder Dezimal (DEC):
Achtung!
bei den Hex / Dec HTML Codes fehlen am Ende evtl der Semikolon ;
also nicht so
... sondern so
also nicht so
... sondern so
:=)
PS: zur DEMO sind die font-files (TTF etc) als volle URL eingetragen,
für eigenen Einsatz sollte man sich diesen Ordner "fonts" runter-laden
was haltet Ihr davon ?
Beitrag zuletzt geändert: 28.3.2015 15:04:52 von bzplan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das mega-Array ist imho kein schöner Programmierstil, vorallem wenn es einfacher geht.
Denkanstoß: svg-Version der Font parsen und so an die Hexcodes kommen. Wenn du die Namen zu den Icons auch noch haben willst, dann lieber gleich die von FontAwesome mitgelieferten css/less/scss Files parsen (ich nehme mal an dass das die Showcase-Page von FontAwesome so ähnlich macht). Das hat dann auch den Vorteil, dass du bei einem Font-Update (= zB neue Icons) nur mehr die Files tauschen musst und das Script nicht.
Und: damit das das ganze funktioniert muss die Font ja in den globalen "Namespace" (nenn ich jetzt mal so) der Seite laden damit die Entity-Codes auch überall funktionieren. Wenn du FontAwesome normal über CSS verwendest wird die Schrift nur in den "Namespace" für alle DOM-Nodes mit der Klasse
geladen. Würde mich mal intressieren ob/wie sich das auf die Renderingperformance auf schwächeren/mobilen Geräten auswirkt..fa
Und als letzter Punkt: kann ich dann überhaupt noch eine andere Font für die Seite verwenden, wenn doch schon FontAwesome im globalen "Namespace" hängt? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
