[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"-IqehlftPiJcH8uY5FelOxIde9DwFWm0ttRu-V8x3no":75,"tjAKqA-yURw8D7ZWWqKA4bECXuW3r65Qyvv6wy3iAgo":176,"_apollo:default":221},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":166,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":169,"author":170},"NodeWpPost","1026","Icon-Fonts",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1383141425,"UTC","+00:00","2013-10-30T13:57:05+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/icon-fonts",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Icon-Fonts | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/icon-fonts","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154,158,162],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","553","grafik","/tag/grafik",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"580","high-res","/tag/high-res",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"612","icon-fonts","/tag/icon-fonts",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"613","Icons","/tag/icons",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"1269","svg","/tag/svg",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"1430","vektor","/tag/vektor",{"__typename":138,"id":163,"name":164,"path":165,"weight":116},"1489","Webdesign","/tag/webdesign",{"__typename":167,"processed":168,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Icon-Fonts\" data-entity-type=\"media\" data-entity-uuid=\"20788896-85cd-45df-b44c-a7d68ba82aff\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=wofCPiI9 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=fEqIAgTG 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"445\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=jT39MzEA 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=iaXZyWYf 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"445\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=S-Wvj1sX 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=fpr8DJ7V 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"332\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=5bXnoznD 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=LRBbu32F 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"214\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=-sIvUITA 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.webp?itok=wiLGdT0d 2x\" type=\"image/webp\" width=\"1000\" height=\"445\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"445\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/10/Icon-Fonts1-1.png.jpg?itok=wiLGdT0d\" alt=\"Icon-Fonts\" title=\"Icon-Fonts\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>In meinen letzten Beiträgen über \u003Ca href=\"https://liechtenecker.at/svg-die-zukunft-von-grafiken-auf-webseiten/\" target=\"_blank\" rel=\"noopener noreferrer\">SVG-Grafiken\u003C/a> und \u003Ca href=\"https://liechtenecker.at/hochauflosende-bilder-auf-webseiten-einbinden/\" target=\"_blank\" rel=\"noopener noreferrer\">hochauflösenden Bildern auf Webseiten\u003C/a> habe ich mich bereits eingehend mit Möglichkeiten befasst, Webseiten durch den Einsatz von hochauflösenden Grafiken zukunftssicher zu machen. In diesem Beitrag über Icon-Fonts, werde ich die bereits beschriebenen Möglichkeiten durch ein weiteres, sehr interessantes Verfahren erweitern.\u003Cbr>\n\u003C/p>\n\u003Ch2>Hintergründe\u003C/h2>\n\u003Cp>Icon-Fonts basieren auf einer simplen Idee: Schriftzeichen sind grundsätzlich nichts anderes, als vektorbasierte Grafiken. Der Buchstabe „B“ z.B. kann als Aneinanderreihung von Punkten verstanden werden, die durch Kurven und Geraden miteinander verbunden sind. Wir benutzen also schon seit dem Beginn des Internets vektorbasierte Grafiken auf unseren Webseiten.\u003Cbr>\nIcon-Fonts versuchen genau diese Idee aufzugreifen: Anstatt Buchstaben in einem Font zusammenzufassen, können bei Icon-Fonts, vektorbasierte Grafiken in einen Font gepackt werden. Dies hat enorme Vorteile und nur einige wenige Nachteile, auf die ich kurz Eingehen möchte.\u003C/p>\n\u003Ch2>Vorteile\u003C/h2>\n\u003Cp>Eine der der größten Vorteile der Icon-Fonts liegt in der Kompatibilität. Da die Unterstützung für Webfonts sogar bis auf Version 5.5 des Internet Explorers zurückgeht, kann man diese im Gegensatz von z.B. SVG-Grafiken uneingeschränkt auf allen heute im Einsatz befindlichen Browsern einsetzen. Der Font wird also, egal wie hoch die Auflösung des Bildschirmes ist, scharf gerendert.\u003Cbr>\nWeitere Vorteile die sich durch den Einsatz von Icon-Fonts ergeben: Der Font kann ganz einfach mit normalem Text kombiniert werden, um so z.B. die beliebte Kombination aus Icon + Text z.b. im Header zu bilden. Da der Browser den Icon-Font wie Text behandelt, können solche Kombination ganz einfach z.B. auch zentriert werden.\u003Cbr>\nEin weiterer großer Vorteil: Der User kann dem Icon durch das CSS-Attribut \u003Cem>color \u003C/em>ganz einfach unterschiedlichste Farben geben. Auch Farbänderungen bei \u003Cem>:hover\u003C/em> und \u003Ca href=\"https://liechtenecker.at/html5-und-css3-animationen/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS3-Transitions\u003C/a> sind damit ganz einfach möglich.\u003C/p>\n\u003Ch2>Nachteile\u003C/h2>\n\u003Cp>Natürlich gibt es immer auch einige Nachteile, die sich beim Icon-Font allerdings in beschaulichen Grenzen halten. Die größte Einschränkung: Icons und Grafiken müssen einfärbig sein – es können also keine unterschiedlich-farbigen Bereiche definiert werden. Hat man sich mit dieser Einschränkung abgefunden, gibt es eigentlich nur wenige, weitere Einschränkungen zu beachten: Die Erstellung von Icon-Fonts geht nicht mit Bordmitteln wie z.B. Photoshop sondern muss über z.B. passende Web-Tools erledigt werden (mehr dazu im Anschluss).\u003Cbr>\nEin weiterer Nachteil betrifft den Workflow, da nach jeder Änderung einer Grafik der gesamte Icon-Font neu rausgespielt werden muss. Auch dieser Punkt kann nur begrenzt als Nachteil angesehen werden, weil der Workflow der Erstellung nicht sonderlich zeitraubend ist.\u003C/p>\n\u003Ch2>Webtools und Sammlungen\u003C/h2>\n\u003Cp>Icon Fonts können einfach und schnell mit Online-Tools wie z.B. \u003Ca href=\"http://icomoon.io/\">Ico Moon\u003C/a> erstellt werden. Dabei werden SVG-Grafiken hochgeladen die dann in einen Webfont (automatische Erstellung von allen Formaten wie eot, svg und woff) umgewandelt werden.\u003Cbr>\nNeben diesen Generatoren gibt es auch eine immer größere werdende Anzahl an bereits fertigen Sammlungen wie z.B. \u003Ca href=\"http://fortawesome.github.io/Font-Awesome/\">Font Awesome\u003C/a>. Nachteil hierbei ist natürlich keinen Einfluss auf die Grafiken selbst zu haben. Dadurch geht vor allem die Freiheit verloren, die Icons perfekt passend auf den Stil der eigenen Webseite auszulegen, weil das hinzufügen von eigenen Icons in solchen Font-Packs nicht möglich ist.\u003C/p>\n\u003Ch2>Ausblick\u003C/h2>\n\u003Cp>Icon-Fonts lösen sicherlich nicht alle Probleme und können nicht generell für alle Grafiken und Icons im Web eingesetzt werden. Der gemeinsame Einsatz von SVG (für komplexere Grafiken) und Icon-Fonts (für Icons und simple Grafiken) ist aber sehr interessant und in Zukunft durch die Weiterentwicklung von Displaytechnologie wohl immer mehr gefordert.\u003Cbr>\nNatürlich stellt sich oft die Frage, ob der Mehraufwand durch den Einsatz von hochauflösenden Grafiken wirklich Sinn macht. Da sich die Displaytechnologie aber kontinuierlich weiterentwickelt und in wenigen Jahren High-Res Displays mit Sicherheit zum Alltag gehören ist diese Frage sicherlich mit „Ja“ zu beantworten.\u003Cbr>\nEin Praxisbeispiel wo wir einen Icon-Fonts aktuell eingesetzt haben ist der Foodblog von Jürgen: \u003Ca title=\"http://goldschwarz.at\" href=\"http://goldschwarz.at\" target=\"_blank\" rel=\"noopener noreferrer\">http://goldschwarz.at\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/icon-fonts/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Icon-Fonts - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"In meinen letzten Beiträgen über SVG-Grafiken und hochauflösenden Bildern auf Webseiten habe ich mich bereits eingehend mit Möglichkeiten befasst, Webseiten durch den Einsatz von hochauflösenden Grafiken zukunftssicher zu machen. In diesem Beitrag über Icon-Fonts, werde ich die bereits beschriebenen Möglichkeiten durch ein weiteres, sehr interessantes Verfahren erweitern. Hintergründe Icon-Fonts basieren auf einer simplen Idee: Schriftzeichen sind grundsätzlich […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/icon-fonts/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-10-30T14:57:05+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2013/10/Icon-Fonts1-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/icon-fonts/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2013/10/Icon-Fonts1-1.png\",\"width\":1000,\"height\":445},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/icon-fonts/#webpage\",\"url\":\"https://liechtenecker.at/blog/icon-fonts/\",\"name\":\"Icon-Fonts - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/icon-fonts/#primaryimage\"},\"datePublished\":\"2013-10-30T14:57:05+00:00\",\"dateModified\":\"2013-10-30T14:57:05+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/icon-fonts/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":171,"id":172,"myRole":173,"name":174,"nickname":175},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":177},[178,196,209],{"__typename":79,"id":179,"title":180,"path":181,"wpTeaserText":182,"wpPromotedTeaserImage":13,"wpHeaderImage":183},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":184,"id":185,"excludeFromScreenreader":13,"mediaImage":186,"name":194,"path":195,"status":20},"MediaImage","3364",{"__typename":187,"url":188,"width":189,"height":190,"alt":191,"title":13,"size":192,"mime":193},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":197,"title":198,"path":199,"wpTeaserText":200,"wpPromotedTeaserImage":13,"wpHeaderImage":201},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":184,"id":202,"excludeFromScreenreader":13,"mediaImage":203,"name":207,"path":208,"status":20},"3355",{"__typename":187,"url":204,"width":189,"height":190,"alt":205,"title":13,"size":206,"mime":193},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":210,"title":211,"path":212,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":213},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":184,"id":214,"excludeFromScreenreader":21,"mediaImage":215,"name":219,"path":220,"status":20},"3303",{"__typename":187,"url":216,"width":189,"height":190,"alt":217,"title":13,"size":218,"mime":193},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":222,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":223,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":227,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":230,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":233,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":236,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":239,"Menu:nuxt-main-menu":242,"ROOT_QUERY":256,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":272,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":275,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":278,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":281,"Menu:footer":284,"TermCategories:8":294,"TermTags:553":305,"TermTags:580":306,"TermTags:612":307,"TermTags:613":308,"TermTags:1269":309,"TermTags:1430":310,"TermTags:1489":311,"User:23":312,"NodeWpPost:1026":313,"MediaImage:3364":344,"NodeWpPost:1619":346,"MediaImage:3355":349,"NodeWpPost:1616":351,"MediaImage:3303":354,"NodeWpPost:1606":356},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",224,"internal",20,"expanded",21,"attributes",226],{"__ref":225},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",231,"internal",20,"expanded",21,"attributes",232],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",234,"internal",20,"expanded",21,"attributes",235],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",237,"internal",20,"expanded",21,"attributes",238],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",240,"internal",20,"expanded",21,"attributes",241],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",243],[244,246,248,250,252,254],{"__ref":245},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":247},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":249},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":251},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":253},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":255},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",257,"menu({\"name\":\"NUXT_MAIN_MENU\"})",258,"menu({\"name\":\"FOOTER\"})",260,"route({\"path\":\"/blog/icon-fonts\"})",262,"latestKnowhow({\"excludeId\":\"1026\",\"limit\":3})",265],"Query",{"__ref":259},"Menu:nuxt-main-menu",{"__ref":261},"Menu:footer",["null","__typename",77,"entity",263],{"__ref":264},"NodeWpPost:1026",[266,268,270],{"__ref":267},"NodeWpPost:1619",{"__ref":269},"NodeWpPost:1616",{"__ref":271},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",273,"internal",20,"expanded",21,"attributes",274],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",276,"internal",20,"expanded",21,"attributes",277],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",279,"internal",20,"expanded",21,"attributes",280],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",282,"internal",21,"expanded",21,"attributes",283],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",285],[286,288,290,292],{"__ref":287},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":289},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":291},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":293},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",295,"langcode",296,"changed",297,"metatag",298],["null","__typename",118,"processed",119,"format",120],{"__ref":225},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[299,301,303],["null","__typename",93,"tag",94,"attributes",300],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",302],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",304],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",138,"id",163,"name",164,"path",165,"weight",116],["null","__typename",171,"id",172,"myRole",173,"name",174,"nickname",175],["null","__typename",79,"id",80,"title",81,"changed",314,"created",315,"langcode",316,"path",90,"promote",21,"status",20,"sticky",21,"metatag",317,"category",324,"contentElements",13,"evergreen",13,"tags",326,"wpBody",341,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",169,"author",342],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":225},[318,320,322],["null","__typename",93,"tag",94,"attributes",319],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",321],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",323],["null","__typename",109,"property",110,"content",81],{"__ref":325},"TermCategories:8",[327,329,331,333,335,337,339],{"__ref":328},"TermTags:553",{"__ref":330},"TermTags:580",{"__ref":332},"TermTags:612",{"__ref":334},"TermTags:613",{"__ref":336},"TermTags:1269",{"__ref":338},"TermTags:1430",{"__ref":340},"TermTags:1489",["null","__typename",167,"processed",168,"format",120,"summary",13],{"__ref":343},"User:23",["null","__typename",184,"id",185,"excludeFromScreenreader",13,"mediaImage",345,"name",194,"path",195,"status",20],["null","__typename",187,"url",188,"width",189,"height",190,"alt",191,"title",13,"size",192,"mime",193],["null","__typename",79,"id",179,"title",180,"path",181,"wpTeaserText",182,"wpPromotedTeaserImage",13,"wpHeaderImage",347],{"__ref":348},"MediaImage:3364",["null","__typename",184,"id",202,"excludeFromScreenreader",13,"mediaImage",350,"name",207,"path",208,"status",20],["null","__typename",187,"url",204,"width",189,"height",190,"alt",205,"title",13,"size",206,"mime",193],["null","__typename",79,"id",197,"title",198,"path",199,"wpTeaserText",200,"wpPromotedTeaserImage",13,"wpHeaderImage",352],{"__ref":353},"MediaImage:3355",["null","__typename",184,"id",214,"excludeFromScreenreader",21,"mediaImage",355,"name",219,"path",220,"status",20],["null","__typename",187,"url",216,"width",189,"height",190,"alt",217,"title",13,"size",218,"mime",193],["null","__typename",79,"id",210,"title",211,"path",212,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",357],{"__ref":358},"MediaImage:3303"]