Iconfont Anleitung - Marco Lemmenmeier
Marco Lemmenmeier is an Interactive Media Designer. He has a passion for design, film and photography. Send him an E-Mail to collaborate.
Marco, Lemmenmeier, Marco Lemmenmeier, IMD, Interactive, Media, Designer, Zurich, St. Gallen, Switzerland, Swiss, Freelancer, Designer, Fotograf, Photographer, UX, UI, Filmemacher, Filmmaker
298
portfolio_page-template-default,single,single-portfolio_page,postid-298,bridge-core-2.1.9,modula-best-grid-gallery,ajax_updown,page_not_loaded,,qode-title-hidden,qode_grid_1400,qode_popup_menu_text_scaledown,qode-child-theme-ver-1.0.0,qode-theme-ver-20.6,qode-theme-bridge,wpb-js-composer js-comp-ver-6.1,vc_responsive

Iconfont Anleitung

Auf Icomoon erstellen wir die Iconfonts für unsere Websiten. Wir laden alles Icons hoch und erstellen somit eine «normale» Schrift einfach mit anderen Zeichen. Wenn man dann zum Beispiel auf der Website ein «A» einbindet, kommt kein «A» sondern vielleicht ein Burger für das Menu. Nun erkläre ich, wie wir so eine Schrift erstellen.
Zuerst loggen wir uns selbstverständlich ein. Oben recht finden wir nun einen Button mit «Upload Icons». Wenn wir dort klicken, können wir mit dem Button «Import Icons» unsere neuen Icons hochladen. Nun wird auf der Startseite eine neue «Section» mit den eben hochgeladenen Icons erstellt. Bitte diese sofort mit einem eindeutigen Namen beschriften. Falls man zu dieser «Section» später zusätzliche Icons hochladen will, können wir das mit dem Dropdown-Icon rechts machen. (Übrigens sieht man auf der Startseite alle Icons. Diese Icons haben noch überhaupt nichts zu tun mit einer Iconfont. Es ist lediglich dich «Datenbank» von allen je zuvor hochgeladenen Icons.)
Somit wären alle Icons hochgeladen und wir können mit der tatsächlichen Font anfangen. Für diesen Schritt klicken wir oben recht auf «Add Font». Nun erstellt es eine «Untitled Font» Bitte diese ebenfalls sofort mit Hilfe vom Button «Modify Font» umbenennen. Jetzt kann man alle gewünschten Icons mit einem Klick anwählen und unter «Publish» herunterladen. So einfach funktioniert es.