{"id":338,"date":"2018-06-17T14:34:40","date_gmt":"2018-06-17T12:34:40","guid":{"rendered":"https:\/\/ekiwi.de\/?p=338"},"modified":"2018-06-17T14:34:40","modified_gmt":"2018-06-17T12:34:40","slug":"feather-icons-schnell-schicke-icons-einbinden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/338\/feather-icons-schnell-schicke-icons-einbinden\/","title":{"rendered":"Feather Icons &#8211; schnell schicke Icons einbinden"},"content":{"rendered":"<p>Kleine Icons peppen die Webseite auf. Musste man fr\u00fcher daf\u00fcr extra kleine Bilddateien auf den Server laden, geht es heute leichter von der Hand. Kleine Java-Script Frameworks nehmen uns die Arbeit ab und bieten einen ganzen Satz an Standardicons im gleichen Design, welche man auch noch kostenlos und als Open Source nutzen kann: Feather Icons.<\/p>\n<p><!--more--><\/p>\n<p>Feather Icons ist eine Sammlung von \u00fcber 250 minimalistischen Icons, welche mittels Java-Script schnell in die Webseite eingebunden werden k\u00f6nnen. Die Icons liegen als Vektorgrafik im SVG-Format vor und sind damit gr\u00f6\u00dfenunabh\u00e4ngig. <\/p>\n<p>Das Einbinden in die eigene Webseite geht durch Einbinden des Scriptes:<\/p>\n<pre>&lt;script src=&quot;https:\/\/unpkg.com\/feather-icons\";&gt;&lt;\/script&gt;<\/pre>\n<p>Anschlie\u00dfend kann man die Icons durch ein Attribut in einem HTML-Tag ausgeben:<\/p>\n<pre>&lt;p&gt;&lt;span data-feather=&quot;terminal&quot;&gt;&lt;\/span&gt; CSS Tools&lt;\/p&gt;<\/pre>\n<p>Das Attribut <code>data-feather<\/code> legt das Icon fest. Den Rest \u00fcbernimmt der Java-Script-Code, welchen wir am Ende des HTML-Dokumentes noch ausf\u00fchren:<\/p>\n<pre>&lt;script&gt;\r\n    feather.replace()    \r\n&lt;\/script&gt;<\/pre>\n<p>Das Ergebnis:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/06\/feather_1.png\" alt=\"\" width=\"106\" height=\"36\" class=\"aligncenter size-full wp-image-339\" \/><\/p>\n<p>Das passende Icon findet man durch die Suchfunktion oder direkt \u00fcber die Auswahlliste auf der Webseite.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/06\/feather_2.png\" alt=\"\" width=\"560\" height=\"320\" class=\"aligncenter size-full wp-image-340\" srcset=\"\/wp-content\/uploads\/2018\/06\/feather_2.png 560w, \/wp-content\/uploads\/2018\/06\/feather_2-300x171.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/p>\n<p>Auf diese Art lassen sich die Icons schnell an verschiedenen Stellen einbinden, man muss keine Bilder extra abspeichern und verlinken und nicht auf relative URLs achten. Script und Icons sind als Open-Source auf Github verf\u00fcgbar. Somit l\u00e4sst sich das Script auch komplett auf dem eigenen Webspace betreiben. Insgesamt eine coole Sache um Webseiten schnell mit fluffigen Icons aufzupeppen.<\/p>\n<p>Auch eine Nutzung ohne Java-Script ist m\u00f6glich:<\/p>\n<pre>\r\n&lt;svg class=&quot;feather&quot;&gt;\r\n  &lt;use xlink:href=&quot;path\/to\/dist\/feather-sprite.svg#circle&quot;\/&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>Und auch die Farben lassen sich mittels CSS ver\u00e4ndern:<\/p>\n<pre>\r\n.feather {\r\n  width: 24px;\r\n  height: 24px;\r\n  stroke: currentColor;\r\n  stroke-width: 2;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n  fill: none;\r\n}<\/pre>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?file=feathericons\">Hier k\u00f6nnen Sie die Funktionen online testen<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Kleine Icons peppen die Webseite auf. Musste man fr\u00fcher daf\u00fcr extra kleine Bilddateien auf den Server laden, geht es heute<\/p>\n","protected":false},"author":1,"featured_media":92,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,74,76,75,44],"class_list":["post-338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-framework","tag-grafiken","tag-icons","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/92"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}