{"id":4008,"date":"2015-01-19T13:35:12","date_gmt":"2015-01-19T13:35:12","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=4008"},"modified":"2022-09-09T16:54:38","modified_gmt":"2022-09-09T16:54:38","slug":"icon-fonts-erstellen-einfache-kurzanleitung","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/","title":{"rendered":"Icon-Fonts erstellen, so geht\u2019s: Einfache Kurzanleitung"},"content":{"rendered":"<p>Icon-Fonts sind von gro\u00dfem Nutzen f\u00fcr Webdesigner. Warum sind sie eigentlich so gefragt? Was macht sie besser als Bitmap-Icons? Was sind Icon-Fonts \u00fcberhaupt? Wie erstellt man sie? Lasst uns es in diesem heutigen Blog-Post erfahren.<\/p>\n<p>Im Gegensatz zu herk\u00f6mmlichen Image-Sprites, k\u00f6nnen Icon-Fonts leicht und ohne jegliche Qualit\u00e4tsverluste bearbeitet werden. Ihr k\u00f6nnt <em>die Deckkraft<\/em><em> \u00e4ndern, sie drehen, Schatten, Farbverl\u00e4ufe, Texturen etc. hinzuf\u00fcgen<\/em>, indem Ihr die notwendigen \u00c4nderungen an dem CSS-Code vornehmt. Um es deutlicher zu machen, werft bitte einen Blick auf das untere Bild. Hier k\u00f6nnt Ihr einen der Icon-Fonts sehen, den wir weiter noch in diesem Tutorial betrachten werden, und der gegen\u00fcber dem gleichen PNG-Bild gestellt wird. Beide Bilder sind gleich gro\u00df und proportional zueinander. Ich denke, Ihr k\u00f6nnt einen klaren und deutlischen Unterschied dazwischen erkennen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/1.jpg?7e70d4\" alt=\"1\" class=\"wp-image-59440\"\/><\/figure>\n<\/div>\n<h3>Was sind Icon-Fonts<\/h3>\n<p>Icon-Fonts sind Vektorgrafiken, die zum Inhalt mit Hilfe von CSS-Eigenschaft <em>content <\/em>hinzugef\u00fcgt werden. So wie die regul\u00e4ren Schriften sind Icon-Fonts skalierbar und k\u00f6nnen mithilfe von Code verwaltet werden. Dies ist einer der gr\u00f6\u00dften Vorteile der Icon-Fonts gegen\u00fcber den Bitmap-Bildern. Au\u00dferdem sind sie leichtgewichtig und f\u00fcr Retina optimiert, und k\u00f6nnen \u00e4hnlich der Standardtexten <strong>\u00fcber CSS gestylt werden<\/strong>. Die gr\u00f6\u00dfte Mehrheit der modernen Web-Design-Studios verwenden Icon-Fonts in ihren Werken, deswegen haben beschlossen, dass es an der Zeit ist, dass Ihr auch damit beginnt, sie in Euren Projekten zu benutzen. Und das ist der Grund, warum wir in unserer heutigen Kurzanleitung Euch zeigen werden, wie man PNG-Icons in Schriften verwandelt.<\/p>\n<p><strong>Die Dinge<span id=\"result_box\" class=\"short_text\"><span class=\"hps\">,<\/span> <span class=\"hps\">die Sie ben\u00f6tigen<\/span>:<\/span><\/strong><\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" href=\"https:\/\/clk.tradedoubler.com\/click?p=264355&amp;a=3279527&amp;url=https%3A%2F%2Fwww.adobe.com%2Fen%2Fproducts%2Fillustrator.html\" target=\"_blank\">Adobe Illustrator<\/a> \u2013 <span id=\"result_box\" class=\"\"><span class=\"hps atn\">Premium-<\/span><span class=\"atn\">Vektor-<\/span>Grafik-Editor<\/span><\/li>\n<li><a rel=\"nofollow noopener\" href=\"https:\/\/inkscape.org\/en\/download\/\" target=\"_blank\" class=\"broken_link\">Inkscape<\/a> \u2013&nbsp;<span id=\"result_box\" class=\"\"> <span class=\"hps\">kostenlose<\/span> <span class=\"hps\">Vektorgrafik-Software mit Profi-Qualit\u00e4t<br \/><\/span><\/span><\/li>\n<li><a rel=\"nofollow noopener\" href=\"http:\/\/fontastic.me\/\" target=\"_blank\">Fontastic.me<\/a> \u2013&nbsp; <span id=\"result_box\" class=\"\"><span class=\"hps atn\">kostenloser Online-<\/span><span class=\"\">Service, der<\/span> eine <span class=\"hps\">schnelle und einfache<\/span> <span class=\"hps\">Erstellung von<\/span> <span class=\"hps\">Icon-Fonts<\/span> <span class=\"hps\">erm\u00f6glicht<\/span><\/span><\/li>\n<\/ul>\n<p><strong><span id=\"result_box\" class=\"\"><span class=\"hps\">Die Dinge, die<\/span> <span class=\"hps\">wir tun werden<\/span><\/span>:<\/strong><\/p>\n<ul>\n<li><span id=\"result_box\" class=\"\"><span class=\"hps\">Umwandlung von<\/span><\/span> .eps-Icons ins .svg-Format<\/li>\n<li><span id=\"result_box\" class=\"\"><span class=\"hps atn\"><span class=\"hps\"> \u00dcbertragung von<\/span> SVG-<\/span>Icons auf F<span class=\"hps\">ontastic.me<br \/><\/span><\/span><\/li>\n<li>Erstellung von Schriften aus <span id=\"result_box\" class=\"\"><span class=\"hps atn\">SVG-<\/span>Icons<\/span><\/li>\n<li><span id=\"result_box\" class=\"\"><span class=\"hps\">Bearbeitung von<\/span> <span class=\"hps\">Stilen<\/span> <span class=\"hps\">und das Hinzuf\u00fcgen von Icon-Fonts <\/span><span class=\"hps\">zum Projekt<\/span><\/span><\/li>\n<\/ul>\n<h3>Umwandlung von .eps-Icons ins .svg-Format<\/h3>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">Um beginnen zu k\u00f6nnen, ben\u00f6tigt Ihr <\/span><span class=\"hps\">eine<\/span> <span class=\"hps\">Zusammenstellung von Icons<\/span> <span class=\"hps\">im EPS<\/span>-Source-Format. <span class=\"hps\">Wir werden<\/span> <span class=\"hps\">die folgenden Icons<\/span> <span class=\"hps\">in unserem<\/span> <span class=\"hps\">Icon-<\/span> <span class=\"hps\">Fonts<\/span>-<span class=\"hps\">Tutorial verwenden<\/span><span class=\"\">.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/2.jpg?7e70d4\" alt=\"Business Icons Set\" class=\"wp-image-59441\"\/><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">\u00d6ffnet bitte <\/span><span class=\"hps\">diese<\/span> .eps-<span class=\"hps\">Datei mit<\/span> <span class=\"hps\">Adobe Illustrator,<\/span> <span class=\"hps\">das<\/span> <span class=\"hps\">auf Eurem PC<\/span> <span class=\"hps\">vorinstalliert<\/span> <span class=\"hps\">sein m\u00fcsste:<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/3.jpg?7e70d4\" alt=\"3\" class=\"wp-image-59442\"\/><\/figure>\n<\/div>\n<p>\u00d6ffnet bitte das Panel mit Ebenen:<\/p>\n<div class=\"wp-block-image thumbnail mfc-thumbnail\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/4.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/4.jpg?7e70d4\" alt=\"4\" class=\"wp-image-59443\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">In unserem Fall<\/span> <span class=\"hps\">m\u00fcssen wir die<\/span> <span class=\"hps\">Breite und H\u00f6he<\/span> <span class=\"hps\">von <strong>50<\/strong><\/span><strong> <span class=\"hps\">\u00d7<\/span> <\/strong><span class=\"hps\"><strong>50<\/strong> auf <strong>1600<\/strong><\/span><strong> <span class=\"hps\">\u00d7 1600<\/span><\/strong> <span class=\"hps\">\u00e4ndern.<\/span> <span class=\"hps\">Grunds\u00e4tzlich<\/span> <span class=\"hps\">spielt<\/span> <span class=\"hps\">die Gr\u00f6\u00dfe<\/span>, die Ihr<span class=\"hps\"> festlegt,<\/span> <span class=\"hps\">keine Rolle.<\/span> Merkt Euch einfach, dass es&nbsp; eine <span class=\"hps\">gen\u00fcgende<\/span> <span class=\"hps\">Arbeitsfl\u00e4che sein muss<\/span><span class=\"\">, um alle Icons<\/span> <span class=\"hps\">zu platzieren.<\/span><\/span><\/p>\n<div class=\"wp-block-image thumbnail mfc-thumbnail\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/5.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/5.jpg?7e70d4\" alt=\"5\" class=\"wp-image-59444\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">In unserem Beispiel<\/span> <span class=\"hps\">haben wir nur eine<\/span> <span class=\"hps\">Hintergrundebene<\/span>, die benutzt wurde, um die Icons <span class=\"hps\">den reinen<\/span> <span class=\"hps\">Wei\u00dft\u00f6nen<\/span> <span class=\"hps\">gegen\u00fcberzustellen.<\/span> <span class=\"hps\">W\u00e4hlt bitte die Ebene <\/span>aus <span class=\"hps\">und<\/span> <span class=\"hps\">dann l\u00f6scht sie.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/6.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/6.jpg?7e70d4\" alt=\"6\" class=\"wp-image-59445\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\"><strong>Beachtet<\/strong>:<\/span> <span class=\"hps\">Manchmal<\/span> <span class=\"hps\">erstellen<\/span> <span class=\"hps\">Designer<\/span> <span class=\"hps\">Icons<\/span> <span class=\"hps\">als<\/span> <strong><span class=\"hps\">Compounf<\/span> <span class=\"hps\">Clipping<\/span> <\/strong><span class=\"hps\"><strong>Art<\/strong>.<\/span> <\/span><\/p>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">In diesem Fall,<\/span> wenn man die <span class=\"hps\">Hintergrundebene&nbsp;entfernt,<\/span> <span class=\"hps\">wird ein Icon<\/span> t<span class=\"hps\">ransparent sein<\/span>, da es <span class=\"hps\">weder<\/span> den <span class=\"hps\">Hintergrund<\/span> <span class=\"hps\">noch<\/span> <span class=\"hps\">die Linienfarbe hat<\/span>. <span class=\"hps\">Was sollten wir<\/span> <span class=\"hps\">in diesem Fall<\/span> <span class=\"hps\">tun? <\/span><\/span><\/p>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">W\u00e4hlt bitte <\/span><span class=\"hps\">alle Ebenen<\/span> <span class=\"hps atn\">(<\/span><strong>STRG + <\/strong><span class=\"hps\"><strong>A<\/strong>)<\/span> <span class=\"hps\">und \u00e4ndert die<\/span> <span class=\"hps\">F\u00fcllfarbe auf<\/span> <span class=\"hps\">schwarz,<\/span> <span class=\"hps\">Linien<\/span><\/span><span id=\"result_box\" class=\"\"><span class=\"hps\">farbe<\/span> <span class=\"hps\">-<\/span> <span class=\"hps\">keine.<\/span> <span class=\"hps\">Falls Ihr noch nicht<\/span> <span class=\"hps\">alle<\/span> <span class=\"hps\">Hintergrundebenen entfernt habt<\/span>, werdet Ihr <span class=\"hps\">es sofort sehen<\/span>, da <span class=\"hps\">das gesamte Bild<\/span>&nbsp;<span class=\"hps\"><a rel=\"noopener nofollow\" href=\"http:\/\/www.kinocube.net\/articles\/how-to-font-icons\/images\/image9.jpg\" target=\"_blank\" class=\"broken_link\">schwarz<\/a> gef\u00e4rbt<\/span> <span class=\"hps\">sein wird.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/7.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/7.jpg?7e70d4\" alt=\"7\" class=\"wp-image-59446\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><strong><span class=\"hps\">Beachtet<\/span><\/strong>: Falls Ihr die <span class=\"hps\">Farbpalette nicht sehen k\u00f6nnt<\/span>, wenn Ihr<span class=\"hps\"> auf die Icons clickt, um<\/span> <span class=\"hps\">die<\/span> <span class=\"hps\">F\u00fcllfarbe und<\/span> <span class=\"hps\">Linienfarbe zu w\u00e4hlen<\/span>, versucht <span class=\"hps\">die gleiche Aktion<\/span> <span class=\"hps\">zu wiederholen, indem Ihr die Shift-Taste dr\u00fcckt.<\/span><\/span><\/p>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">Das war's dann erstmal zu<\/span><span class=\"hps\"> dem ersten Stadium<\/span>. <span class=\"hps\">Speichert bitte die Datei<\/span> <span class=\"hps\">mit<\/span> Icons <span class=\"hps\">im<\/span> <span class=\"hps atn\">SVG-<\/span><span class=\"atn\">Format (<\/span>STRG<span class=\"atn\">-<\/span>SHIFT<span class=\"\">-S<\/span> <span class=\"hps\">oder<\/span> <strong><span class=\"hps\">Datei - Speichern unter<\/span><\/strong><span class=\"hps\">) und lasst uns fortfahren.<\/span><\/span><\/p>\n<h3>\u00dcbertragung von SVG-Icons auf Fontastic.me<\/h3>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">Startet bitte<\/span> <strong><span class=\"hps\">Inkscape<\/span><\/strong> <span class=\"hps\">und \u00f6ffnet<\/span> <span class=\"hps\">die<strong> Quelldatei<\/strong><\/span> <span class=\"hps\">mit<\/span> <span class=\"hps atn\">SVG-<\/span><span class=\"atn\">Icons (<\/span><strong><span class=\"\">Datei - \u00d6ffnen<\/span><\/strong><span class=\"hps\">).<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/8.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/8.jpg?7e70d4\" alt=\"8\" class=\"wp-image-59447\"\/><\/a><\/figure>\n<\/div>\n<p>Erstellt bitte ein n<span id=\"result_box\" class=\"\"><span class=\"hps\">eues Dokument<\/span> <span class=\"hps\">-<\/span> <span class=\"hps atn\">\"<\/span><strong>Datei - Neu - <span class=\"hps\">fontforge_glyph<\/span><\/strong>\" <span class=\"hps atn\">(<\/span>Angenommen, es wird unsere <strong>T<span class=\"hps\">empor\u00e4re Datei<\/span> <\/strong><span class=\"hps\">sein).<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/9.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/9.jpg?7e70d4\" alt=\"9\" class=\"wp-image-59448\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">Kopiert bitte die Icons<\/span><span class=\"hps\"> aus der<\/span> <span class=\"hps\"><strong>Quelldatei<\/strong> in die<\/span> <strong>T<span class=\"hps\">empor\u00e4re Datei<\/span><\/strong><span class=\"\">.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/10.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/10.jpg?7e70d4\" alt=\"10\" class=\"wp-image-59449\"\/><\/a><\/figure>\n<\/div>\n<p><span id=\"result_box\" class=\"\"><span class=\"hps\">In diesem Stadium<\/span> <span class=\"hps\">k\u00f6nnt Ihr die<\/span> <span class=\"hps\">Quelldatei<\/span> <span class=\"hps\">schlie\u00dfen.<\/span> W<span class=\"hps\">\u00e4hlt nun bitte <\/span><span class=\"hps\">alle Icons<\/span> <span class=\"hps\">in der tempor\u00e4ren Datei<\/span> <span class=\"hps\">und<\/span> einen <span class=\"hps\">Ma\u00dfstab<\/span> <span class=\"hps\">f\u00fcr<\/span> <span class=\"hps\">ein Icon aus<\/span>, um den Wortb<span class=\"hps\">ereich anzupassen.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/11.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/11.jpg?7e70d4\" alt=\"11\" class=\"wp-image-59450\"\/><\/a><\/figure>\n<\/div>\n<p><strong>Bedenkt<\/strong>: <span id=\"result_box\" class=\"\"><span class=\"hps\">Wir brauchen diese<\/span> <strong>T<span class=\"hps\">empor\u00e4re Datei,<\/span><\/strong> um <span class=\"hps\">alle Icons<\/span> <span class=\"hps\">proportional zueinander zu machen<\/span>, das im Weiteren <span class=\"hps\">unsere Arbeit<\/span> <span class=\"hps\">erleichtern wird.<\/span> <\/span><\/p>\n<p>Als n\u00e4chstes erstellt ein neues Dokument \u201cDatei \u2013 Neu \u2013 fontforge_glyph\u201d (<strong>Zieldatei<\/strong>).<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/12.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/12.jpg?7e70d4\" alt=\"12\" class=\"wp-image-59451\"\/><\/a><\/figure>\n<\/div>\n<p>Schneidet bitte ein Icon aus der <strong>Tempor\u00e4ren Datei<\/strong> (CTRL+X) aus und f\u00fcgt es in die <strong>Zieldatei<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/13.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/13.jpg?7e70d4\" alt=\"13\" class=\"wp-image-59452\"\/><\/a><\/figure>\n<\/div>\n<p>Das Icon soll zentriert sein. <span id=\"result_box\" class=\"\"><span class=\"hps\">Um es<\/span> <span class=\"hps\">in die<\/span> <span class=\"hps\">Mitte der Seite<\/span> <span class=\"hps\">zu setzen, w\u00e4hlt bitte <\/span><span class=\"hps\"><strong>Object \u2013 Align and Distribute<\/strong><\/span><span class=\"\">.<\/span><\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/14.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/14.jpg?7e70d4\" alt=\"14\" class=\"wp-image-59453\"\/><\/a><\/figure>\n<\/div>\n<p>Das folgende Panel wird erscheinen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/15.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/15.jpg?7e70d4\" alt=\"15\" class=\"wp-image-59454\"\/><\/a><\/figure>\n<\/div>\n<p>W\u00e4hlt bitte das <strong>Icon<\/strong> und \"<strong>Page<\/strong>\" im \"<strong>Relative to<\/strong>\" Menu auf dem \"<strong>Align and Distribute<\/strong>\"-Panel aus. Setzt bitte ein H\u00e4ckchen neben \"<strong>Treat selection as group<\/strong>\" und clickt auf die \"<strong>Center on vertical axis<\/strong>\"- und \"<strong>Center on horizontal axis<\/strong>\"<strong>-<\/strong>Taste.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/16.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/16.jpg?7e70d4\" alt=\"16\" class=\"wp-image-59455\"\/><\/a><\/figure>\n<\/div>\n<p><span>Jetzt&nbsp;ist das Icon zentriert.<\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/17.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/17.jpg?7e70d4\" alt=\"17\" class=\"wp-image-59456\"\/><\/a><\/figure>\n<\/div>\n<p><span>Speichert bitte die <strong>Zieldatei<\/strong> als <strong>Plain-SVG<\/strong> (<strong>Datei<\/strong> - <strong>Speichern unter<\/strong>).<\/span><\/p>\n<p>F\u00fcr die restlichen Icons aus der <strong>Quelldatei<\/strong> gelten <span>die gleichen Ma\u00dfnahmen<\/span>. <span>Als Ergebnis sollten Sie eine Reihe von 25 SVG-Dateien erhalten. <\/span><span>Das war's f\u00fcr <strong>Inkscape<\/strong>. Lasst uns nun zum n\u00e4chsten Schritt \u00fcbergehen.<\/span><\/p>\n<h3>Erstellung von Schriften aus SVG-Icons<\/h3>\n<p><span>Geht bitte auf die Fontastic.me Seite. Meldet Euch bei Ihrem Konto an, und Ihr werdet eine App f\u00fcr Erstellung von Icon-Fonts sehen.<\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/18.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/18.jpg?7e70d4\" alt=\"18\" class=\"wp-image-59457\"\/><\/a><\/figure>\n<\/div>\n<p>Clickt bitte<strong> \"Mehr Icons hinzuf\u00fcgen\".<br \/><\/strong><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/19.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/19.jpg?7e70d4\" alt=\"19\" class=\"wp-image-59458\"\/><\/a><\/figure>\n<\/div>\n<p>Als n\u00e4chstes dr\u00fcckt bitte die<strong> IMPORT ICONS<\/strong>-Taste.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/20.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/20.jpg?7e70d4\" alt=\"20\"\/><\/a><\/figure>\n<\/div>\n<p><span>W\u00e4hlt bitte alle 25 SVG-Icons und klickt auf \"<strong>\u00d6ffnen<\/strong>\". Wartet, bis alle Icons hochgeladen werden. Im Durchschnitt dauert es weniger als eine Sekunde. Sollte ein Fehler w\u00e4hrend des Hochladens eintretten, k\u00f6nnte es sein, dass Ihr etwas in den oben genannten Schritten falsch gemacht habt. Es kommt oft vor, dass die Designer ein falsches Dateiformat beim Speichern der Icons&nbsp;w\u00e4hlen (z.B. <strong>Inkscape SVG<\/strong> statt <strong>.svg<\/strong>).<\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/21.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/21.jpg?7e70d4\" alt=\"21\" class=\"wp-image-59460\"\/><\/a><\/figure>\n<\/div>\n<p><span>Dr\u00fcckt <strong>OK<\/strong>, und dann kommt wieder zur\u00fcck auf die Fontastic Homepage. Die hochgeladenen Icons werden hier gespeichert. Wenn Ihr schwarze Felder statt einiger Icons sieht, ist es wahrscheinlich, weil Ihr vergessen habt, die Hintergr\u00fcnde dieser Icons in der Phase 1 \"<strong><span id=\"result_box\" class=\"\"><span class=\"hps\">Umwandlung von<\/span><\/span> .eps-Icons ins .svg-Format<\/strong>\" zu l\u00f6schen.<\/span><\/p>\n<p>Markiert bitte jetzt die ausgew\u00e4hlten Symbole f\u00fcr Eure Schrift.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/22.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/22.jpg?7e70d4\" alt=\"22\" class=\"wp-image-59461\"\/><\/a><\/figure>\n<\/div>\n<p>Dr\u00fcckt bitte auf <strong>\u201cSchrift modifizieren\u201d<\/strong><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/23.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/23.jpg?7e70d4\" alt=\"23\" class=\"wp-image-59462\"\/><\/a><\/figure>\n<\/div>\n<p>Gebt bitte den Schriftennamen und den CSS-Klasse-Pr\u00e4fix ein. Klickt auf <strong>Speichern<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2015\/01\/24.jpg?7e70d4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/24.jpg?7e70d4\" alt=\"24\" class=\"wp-image-59463\"\/><\/a><\/figure>\n<\/div>\n<p>Dr\u00fcckt bitte die \u201e<strong>Customize\u201d<\/strong> \u2013Taste. Hier k\u00f6nnt Ihr den Namen sowohl f\u00fcr jedes Icon, als auch f\u00fcr jeden Set-Code eingeben.<\/p>\n<figure class=\"is-layout-flex wp-block-gallery-1 wp-block-gallery aligncenter columns-1 is-cropped\">\n<ul class=\"blocks-gallery-grid\">\n<li class=\"blocks-gallery-item\">\n<figure><img decoding=\"async\" src=\"http:\/\/monsterspost.com\/wp-content\/uploads\/2015\/01\/25.jpg?7e70d4\" alt=\"25\" data-id=\"59464\" class=\"wp-image-59464\"\/><\/figure>\n<\/li>\n<\/ul>\n<\/figure>\n<p>Klickt bitte auf den Button \u201e<strong>Ver\u00f6ffentlichen<\/strong>\u201c, \u201e<strong>Herunterladen<\/strong>\u201c, und dann geht weiter zum n\u00e4chsten Schritt.<\/p>\n<p><strong>Verwaltung von Stilen,<br \/>Hinzuf\u00fcgen von Icons<\/strong><\/p>\n<p>Entpackt bitte die Dateien aus dem Archiv und kopiert sie in den <strong>Schriftenordner<\/strong> Eures Projekts. Vergesst dabei aber nicht den styles.css-Ordner ebenfalls zu kopieren. Beispielsweise, k\u00f6nntet Ihr den <strong>Schriftenordner<\/strong> in den <strong>Seitenordner<\/strong> Eures Projekts und styles.css in den <strong>css<\/strong>-Ordner kopieren.<\/p>\n<p>\u00d6ffnet bitte die Stile in einem beliebigen Texteditor. Hier m\u00fcsst Ihr die Icon-Fonts platzieren und die \u00fcberfl\u00fcssigen Stile entfernen.<\/p>\n<pre class=\"wp-block-code\"><code><div><pre>@charset \"UTF-8\"; \/* Remove, UTF-8 is written in HTML *\/\n@font-face {\n    font-family: \"24804-icons\";\n    src:url(\"fonts\/24804-icons.eot\"); \/* Here we indicate fonts path *\/\n    src:url(\"fonts\/24804-icons.eot?#iefix\") format(\"embedded-opentype\"),\n        url(\"fonts\/24804-icons.woff\") format(\"woff\"),\n        url(\"fonts\/24804-icons.ttf\") format(\"truetype\"),\n        url(\"fonts\/24804-icons.svg#24804-icons\") format(\"svg\");\n    font-weight: normal;\n    font-style: normal;\n}\n\/* This section can be removed as unnecessary *\/\n&#91;data-icon]:before {\n    font-family: \"24804-icons\" !important;\n    content: attr(data-icon);\n    font-style: normal !important;\n    font-weight: normal !important;\n    font-variant: normal !important;\n    text-transform: none !important;\n    speak: none;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\/* ========================================== *\/\n&#91;class^=\"tm-\"]:before,\n&#91;class*=\" tm-\"]:before {\n    font-family: \"24804-icons\" !important;\n    font-style: normal !important;\n    font-weight: normal !important;\n    font-variant: normal !important;\n    text-transform: none !important;\n    speak: none;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n.tm-apple:before {\n    content: \"\\e000\";\n}\n.tm-bookmark:before {\n    content: \"\\e001\";\n}\n.tm-protect:before {\n    content: \"\\e002\";\n}\n.tm-pin:before {\n    content: \"\\e003\";\n}\n.tm-pulse:before {\n    content: \"\\e004\";\n}\n.tm-calc:before {\n    content: \"\\e005\";\n}\n.tm-call:before {\n    content: \"\\e006\";\n}\n.tm-responsive:before {\n    content: \"\\e007\";\n}\n.tm-scale:before {\n    content: \"\\e008\";\n}\n.tm-cell:before {\n    content: \"\\e009\";\n}\n.tm-doc:before {\n    content: \"\\e00a\";\n}\n.tm-search:before {\n    content: \"\\e00b\";\n}\n.tm-support:before {\n    content: \"\\e00c\";\n}\n.tm-gears:before {\n    content: \"\\e00d\";\n}\n.tm-group:before {\n    content: \"\\e00e\";\n}\n.tm-time:before {\n    content: \"\\e00f\";\n}\n.tm-touch:before {\n    content: \"\\e010\";\n}\n.tm-lib:before {\n    content: \"\\e011\";\n}\n.tm-lock:before {\n    content: \"\\e012\";\n}\n.tm-tribune:before {\n    content: \"\\e013\";\n}\n.tm-user:before {\n    content: \"\\e014\";\n}\n.tm-mobile:before {\n    content: \"\\e015\";\n}\n.tm-mouse:before {\n    content: \"\\e016\";\n}\n.tm-wifi:before {\n    content: \"\\e017\";\n}\n.tm-pazzle:before {\n    content: \"\\e018\";\n}<\/pre>\n<\/div>\n<p><\/code><\/p>\n<p>Nach der Anwendung der notwendigen \u00c4nderungen an der Quelldatei, bekommt Ihr dies hier:<\/p>\n<pre class=\"wp-block-code\"><code><div><pre>@font-face {\n    font-family: \"24804-icons\";\n    src:url(\"..\/fonts\/24804-icons.eot\");\n    src:url(\"..\/fonts\/24804-icons.eot?#iefix\") format(\"embedded-opentype\"),\n        url(\"..\/fonts\/24804-icons.woff\") format(\"woff\"),\n        url(\"..\/fonts\/24804-icons.ttf\") format(\"truetype\"),\n        url(\"..\/fonts\/24804-icons.svg#24804-icons\") format(\"svg\");\n    font-weight: normal;\n    font-style: normal;\n}\n&#91;class^=\"tm-\"]:before,\n&#91;class*=\" tm-\"]:before {\n    font-family: \"24804-icons\" !important;\n    font-style: normal !important;\n    font-weight: normal !important;\n    font-variant: normal !important;\n    text-transform: none !important;\n    speak: none;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n.tm-apple:before {\n    content: \"\\e000\";\n}\n.tm-bookmark:before {\n    content: \"\\e001\";\n}\n.tm-protect:before {\n    content: \"\\e002\";\n}\n.tm-pin:before {\n    content: \"\\e003\";\n}\n.tm-pulse:before {\n    content: \"\\e004\";\n}\n.tm-calc:before {\n    content: \"\\e005\";\n}\n.tm-call:before {\n    content: \"\\e006\";\n}\n.tm-responsive:before {\n    content: \"\\e007\";\n}\n.tm-scale:before {\n    content: \"\\e008\";\n}\n.tm-cell:before {\n    content: \"\\e009\";\n}\n.tm-doc:before {\n    content: \"\\e00a\";\n}\n.tm-search:before {\n    content: \"\\e00b\";\n}\n.tm-support:before {\n    content: \"\\e00c\";\n}\n.tm-gears:before {\n    content: \"\\e00d\";\n}\n.tm-group:before {\n    content: \"\\e00e\";\n}\n.tm-time:before {\n    content: \"\\e00f\";\n}\n.tm-touch:before {\n    content: \"\\e010\";\n}\n.tm-lib:before {\n    content: \"\\e011\";\n}\n.tm-lock:before {\n    content: \"\\e012\";\n}\n.tm-tribune:before {\n    content: \"\\e013\";\n}\n.tm-user:before {\n    content: \"\\e014\";\n}\n.tm-mobile:before {\n    content: \"\\e015\";\n}\n.tm-mouse:before {\n    content: \"\\e016\";\n}\n.tm-wifi:before {\n    content: \"\\e017\";\n}\n.tm-pazzle:before {\n    content: \"\\e018\";\n}<\/pre>\n<\/div>\n<p><\/code><\/p>\n<p>Jetzt nur noch Icon-Stile zu style.css und Icon zu html hinzuf\u00fcgen.<\/p>\n<pre class=\"wp-block-code\"><code><div><pre>\/* file style.css *\/\n...\n@import 'tm-icons.css'\n...<\/pre>\n<\/div>\n<p><\/code><\/p>\n<pre class=\"wp-block-code\"><code><div><pre>\/* file *.html *\/\n...\n&lt;span class='tm-protect'&gt;&lt;\/span&gt;\n...<\/pre>\n<\/div>\n<p><\/code><\/p>\n<p><strong>Schlusswort<\/strong><\/p>\n<p>Das war\u2018s, Leute. Jetzt habt Ihr gelernt, wie man Icon-Schrift erstellt. Ihr k\u00f6nnt sie in unterschiedlicher Art und Weise verwenden: alles h\u00e4ngt von Eurer Vorstellungskraft ab. Ich w\u00fcnsche Euch dabei viel Spa\u00df!<\/p>\n<p>Dieser Artikel wurde aus dem Englischen \u00fcbersetzt. Das Original findet Ihr hier: <a rel=\"noopener\" href=\"http:\/\/blog.templatemonster.com\/2015\/01\/15\/how-to-create-icon-fonts-guide\/\" target=\"_blank\" class=\"broken_link\"><em>How to Create Icon Fonts. Quick Start Guide.<\/em> <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icon-Fonts sind von gro\u00dfem Nutzen f\u00fcr Webdesigner. Warum sind sie eigentlich so gefragt? Was macht sie besser als Bitmap-Icons? Was sind Icon-Fonts \u00fcberhaupt? Wie erstellt man sie? Lasst uns es in diesem heutigen Blog-Post erfahren. Im Gegensatz zu herk\u00f6mmlichen Image-Sprites, k\u00f6nnen Icon-Fonts leicht und ohne jegliche Qualit\u00e4tsverluste bearbeitet werden. Ihr k\u00f6nnt die Deckkraft \u00e4ndern, sie [&hellip;]<\/p>\n","protected":false},"author":1805543,"featured_media":4009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,9],"tags":[88,222,182,146],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie erstellt man Icon-Fonts? (Kurzanleitung)<\/title>\n<meta name=\"description\" content=\"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie erstellt man Icon-Fonts? (Kurzanleitung)\" \/>\n<meta property=\"og:description\" content=\"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-19T13:35:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-09T16:54:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2015\/01\/IconFonts-900x538.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Wirth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Wirth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\"},\"author\":{\"name\":\"Olga Wirth\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\"},\"headline\":\"Icon-Fonts erstellen, so geht\u2019s: Einfache Kurzanleitung\",\"datePublished\":\"2015-01-19T13:35:12+00:00\",\"dateModified\":\"2022-09-09T16:54:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\"},\"wordCount\":1241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"Fonts\",\"Icons\",\"Tutorials\",\"Webdesign\"],\"articleSection\":[\"Grafik\",\"Webdesign\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\",\"url\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\",\"name\":\"Wie erstellt man Icon-Fonts? (Kurzanleitung)\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2015-01-19T13:35:12+00:00\",\"dateModified\":\"2022-09-09T16:54:38+00:00\",\"description\":\"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Icon-Fonts erstellen, so geht\u2019s: Einfache Kurzanleitung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\",\"name\":\"Olga Wirth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Wirth\"},\"description\":\"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/olgawirth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie erstellt man Icon-Fonts? (Kurzanleitung)","description":"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/","og_locale":"de_DE","og_type":"article","og_title":"Wie erstellt man Icon-Fonts? (Kurzanleitung)","og_description":"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.","og_url":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2015-01-19T13:35:12+00:00","article_modified_time":"2022-09-09T16:54:38+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2015\/01\/IconFonts-900x538.jpg","type":"image\/jpeg"}],"author":"Olga Wirth","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Wirth","Gesch\u00e4tzte Lesezeit":"12 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/"},"author":{"name":"Olga Wirth","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e"},"headline":"Icon-Fonts erstellen, so geht\u2019s: Einfache Kurzanleitung","datePublished":"2015-01-19T13:35:12+00:00","dateModified":"2022-09-09T16:54:38+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/"},"wordCount":1241,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["Fonts","Icons","Tutorials","Webdesign"],"articleSection":["Grafik","Webdesign"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/","url":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/","name":"Wie erstellt man Icon-Fonts? (Kurzanleitung)","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2015-01-19T13:35:12+00:00","dateModified":"2022-09-09T16:54:38+00:00","description":"In diesem kurzen Tutorial kannst du lernen, wie man einfach und schnell Icon-Fonts erstellt.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/icon-fonts-erstellen-einfache-kurzanleitung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Icon-Fonts erstellen, so geht\u2019s: Einfache Kurzanleitung"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e","name":"Olga Wirth","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Wirth"},"description":"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/olgawirth\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/4008"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1805543"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=4008"}],"version-history":[{"count":15,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/4008\/revisions"}],"predecessor-version":[{"id":28509,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/4008\/revisions\/28509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/4009"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=4008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=4008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=4008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}