{"id":5670,"date":"2020-06-18T05:20:47","date_gmt":"2020-06-18T05:20:47","guid":{"rendered":"https:\/\/musilda.cz\/?p=5670"},"modified":"2020-06-18T05:20:47","modified_gmt":"2020-06-18T05:20:47","slug":"jak-pouzit-ve-wordpressu-font-awesome","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-pouzit-ve-wordpressu-font-awesome\/","title":{"rendered":"Jak pou\u017e\u00edt ve WordPressu Font Awesome"},"content":{"rendered":"\n<p>Ikonky jsou ned\u00edlnou sou\u010d\u00e1st\u00ed ka\u017ed\u00e9ho webu. Nejpou\u017e\u00edvan\u011bj\u0161\u00ed \u0159e\u0161en\u00ed pro jejich vkl\u00e1d\u00e1n\u00ed do str\u00e1nky je Font Awesome. Uk\u00e1\u017eeme si, jak na to. <\/p>\n\n\n\n<p>Na za\u010d\u00e1tku byl takzvan\u00fd ikonofont. Tedy webfont, kter\u00fd m\u00edsto znak\u016f obsahoval speci\u00e1ln\u00ed symboly &#8211; ikony. <\/p>\n\n\n\n<p>Ka\u017ed\u00e1 ikonka m\u00e1 sv\u016fj specifick\u00fd k\u00f3d a d\u00edky css pseudoelementu :before se na m\u00edst\u011b htm tagu &lt;i&gt; zobraz\u00ed vybran\u00e1 ikona. <\/p>\n\n\n\n<p>V\u00fdhodou je jednoduch\u00e9 vkl\u00e1d\u00e1n\u00ed ikon do obsahu a jejich pou\u017eit\u00ed v designu. <\/p>\n\n\n\n<p>V sou\u010dasn\u00e9 dob\u011b je FontAwesome ve verzi 6, ale b\u011b\u017en\u011b se pou\u017e\u00edv\u00e1 verze 5 a ni\u017e\u0161\u00ed. <\/p>\n\n\n\n<p>Zp\u016fsob pou\u017eit\u00ed se d\u00e1 rozd\u011blit do dvou \u010d\u00e1st\u00ed &#8211; pou\u017eit\u00ed fontu a svg. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak FontAwesome funguje?<\/h2>\n\n\n\n<p>Nejprve si mus\u00edme \u0159\u00edci, jak se ikony zobrazuj\u00ed v k\u00f3du. V podstat\u011b m\u00e1te na v\u00fdb\u011br dva elementy a to i a span. T\u011bm d\u00e1te css t\u0159\u00eddy, kter\u00e9 se postaraj\u00ed o p\u0159i\u0159azen\u00ed odpov\u00eddaj\u00edc\u00edho stylu ikony. Vypad\u00e1 to t\u0159eba takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fas fa-user\"&gt;&lt;\/i&gt;\n&lt;span class=\"fas fa-user\"&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>Pozor na to, \u017ee od verze 5 se zm\u011bnila t\u0159\u00edda <strong>fa<\/strong>. Star\u0161\u00ed verze toti\u017e pou\u017e\u00edvali tuto t\u0159\u00eddu a pokud va\u0161e \u0161ablona vkl\u00e1d\u00e1 stylopis pro verzi 4 a m\u00e1te v k\u00f3du ikony takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fa fa-user\"&gt;&lt;\/i&gt;\n&lt;span class=\"fa fa-user\"&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>tak p\u0159i aktualizaci stylopisu se v\u00e1m ikony mohou p\u0159estat zobrazovat. D\u016fvod , pro\u010d se t\u0159\u00edda zm\u011bnila je jednoduch\u00fd. Ozna\u010duje toti\u017e font family a t\u011bch je od verze 5 pon\u011bkud v\u00edce:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>fas &#8211; v\u00fdchoz\u00ed font family, osobn\u011b bych ikon\u00e1m p\u0159i\u0159adil \u0159ez bold &#8211; 700. <\/li><li>far &#8211; regular \u0159ez ikon &#8211; 400<\/li><li>fal &#8211; light verze &#8211; 300<\/li><li>fad &#8211; duotone verze ikon, m\u00e1 barevn\u00e9 odst\u00edny<\/li><li>fab &#8211; brandov\u00e9 ikony<\/li><\/ul>\n\n\n\n<p>Ve free verzi m\u00e1te k dispozici jen fas a fab, ostatn\u00ed jsou ji\u017e sou\u010d\u00e1st\u00ed premium verze. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"523\" src=\"https:\/\/musilda.cz\/wp-content\/uploads\/2020\/06\/user-ikon.png\" alt=\"\" class=\"wp-image-5694\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2020\/06\/user-ikon.png 636w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2020\/06\/user-ikon-300x247.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>Takto vypad\u00e1 vykreslen\u00e1 ikona. <\/p>\n\n\n\n<p>Pokud se dr\u017e\u00edme toho, \u017ee zat\u00edm pou\u017e\u00edv\u00e1me font, ka\u017ed\u00fd element, kter\u00e1 m\u00e1 t\u0159\u00eddu fas, m\u00e1 p\u0159i\u0159azen font-family &#8222;FontAwesome&#8220; a t\u0159\u00edda fas-user definuje, co se bude zobrazovat. K\u00f3d po vykreslen\u00ed by m\u011bl vypadat n\u011bjak takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.fas{\n    font-family:\"FontAwesome\";\n}\n.fa-user:before{\n    content:'\\f406';\n}<\/code><\/pre>\n\n\n\n<p>Je to zjednodu\u0161en\u00e9, ale vid\u00edte, \u017ee pseudoelement :before m\u00e1 p\u0159i\u0159azen content &#8211; unicode t\u00e9 konkr\u00e9tn\u00ed ikony. D\u00edky tomu, \u017ee se jedn\u00e1 o font, m\u016f\u017eete t\u0159\u00edde .fa p\u0159id\u00e1vat css, jako je barva, font-size a dal\u0161\u00ed. Na font-weight ikona reagovat nebude.<\/p>\n\n\n\n<p>Proto\u017ee se jedn\u00e1 o html tag i, m\u016f\u017eete i jemu p\u0159idat vlastn\u00ed t\u0159\u00eddu a upravit tak vzhled pro ikonu v konkr\u00e9tn\u00edm um\u00edst\u011bn\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fas fa-user header-account-icon\"&gt;&lt;\/i&gt;\n&lt;span class=\"fas fa-user header-account-icon\"&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Vlo\u017een\u00ed FontAwesome do \u0161ablony<\/h2>\n\n\n\n<p>Co mus\u00ed ka\u017ed\u00fd v\u00fdvoj\u00e1\u0159 ud\u011blat \u00fapln\u011b na za\u010d\u00e1tku, je na\u010d\u00edst css samotn\u00e9ho fontu. <\/p>\n\n\n\n<p>D\u0159\u00edve se pou\u017e\u00edvalo vkl\u00e1d\u00e1n\u00ed z url, jako nap\u0159\u00edklad takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#047;&#047;stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css<\/code><\/pre>\n\n\n\n<p>Samoz\u0159ejm\u011b, mohli jste si styly ulo\u017eit i na vlastn\u00edm serveru, co\u017e jsem nikdy ned\u011blal, proto\u017ee CDN jsou v\u011bt\u0161inou v\u00fdhodn\u011bj\u0161\u00ed. <\/p>\n\n\n\n<p>Aktu\u00e1ln\u011b v\u00e1m po zaregistrov\u00e1n\u00ed syst\u00e9m ve FontAwesome vytvo\u0159\u00ed embed script, kter\u00fd m\u016f\u017eete pou\u017e\u00edvat nap\u0159\u00ed\u010d v\u0161emi va\u0161imi weby:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/use.fontawesome.com\/7eafb69b9a.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Samoz\u0159ejm\u011b, \u017ee ve WordPressu mus\u00edte pou\u017e\u00edt funkci <a href=\"https:\/\/musilda.cz\/funkce-wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_script<\/a>, d\u00edky n\u00ed\u017e vlo\u017e\u00edte script do str\u00e1nky. Nezapome\u0148te na pou\u017eit\u00ed atributu defer.<\/p>\n\n\n\n<p>A to je v\u0161e, m\u016f\u017eete za\u010d\u00edt pou\u017e\u00edvat font. D\u00edky tomu, \u017ee to je vlastn\u011b velmi snadn\u00e9, pou\u017e\u00edv\u00e1 se font velmi \u010dasto a m\u016f\u017ee se v\u00e1m st\u00e1t, \u017ee jej bude na\u010d\u00edtat v\u00edce plugin\u016f, Pozor i na star\u0161\u00ed verze. <\/p>\n\n\n\n<p>Pro ty co necht\u011bj\u00ed, nebo neum\u00ed programovat, je zde ofici\u00e1ln\u00ed plugin pro vlo\u017een\u00ed fotu do str\u00e1nky <a href=\"https:\/\/wordpress.org\/plugins\/font-awesome\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wordpress.org\/plugins\/font-awesome\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FontAwesome ikony jako svg<\/h2>\n\n\n\n<p>Pou\u017eit\u00ed fontu je trochu problematick\u00e9 v tom,  \u017ee se mus\u00ed na\u010d\u00edtat dal\u0161\u00ed extern\u00ed zdroj a t\u00edm se sni\u017euje rychlost str\u00e1nky. Ne nijak v\u00fdznamn\u011b, ale ka\u017ed\u00fd request se po\u010d\u00edt\u00e1. <\/p>\n\n\n\n<p>Pokud tedy d\u011bl\u00e1te \u0161ablonu, kde bude jen n\u011bkolik m\u00e1lo ikon, nebo um\u00edte pracovat s svg sprity, m\u016f\u017eete vyu\u017e\u00edt toho, \u017ee FontAwesome svg um\u00ed. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"114\" src=\"https:\/\/musilda.cz\/wp-content\/uploads\/2020\/06\/fontawesome-svg.png\" alt=\"\" class=\"wp-image-5698\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2020\/06\/fontawesome-svg.png 795w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2020\/06\/fontawesome-svg-300x43.png 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2020\/06\/fontawesome-svg-768x110.png 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p>U ka\u017ed\u00e9 ikony si m\u016f\u017eete st\u00e1hnout svg soubor s kter\u00fdm pak m\u016f\u017eete d\u00e1le pracovat. U men\u0161\u00ed projekt\u016f, kde je m\u00e1lo ikon, vkl\u00e1d\u00e1m svg k\u00f3d p\u0159\u00edmo do html, u v\u011bt\u0161\u00edch pou\u017e\u00edvat sprity. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FontAwesome svg sprite<\/h2>\n\n\n\n<p>P\u0159i pou\u017eit\u00ed sprit\u016f si st\u00e1hn\u011bte cel\u00fd FontAwesome bal\u00ed\u010dek a ve slo\u017ece sprites najdete p\u0159ipraven\u00e9 sprity. Ty na\u010dt\u011bte do \u0161ablony a v k\u00f3du pak sta\u010d\u00ed pou\u017e\u00edt n\u00e1sleduj\u00edc\u00ed z\u00e1pis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg&gt;\n    &lt;use xlink:href=\"solid.svg#user\"&gt;&lt;\/use&gt;\n  &lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>To co je za odr\u00e1\u017ekou, je identifikace ikony. Proto\u017ee op\u011bt plat\u00ed, \u017ee velikost soubor\u016f a po\u010det request\u016f je to co se po\u010d\u00edt\u00e1, pro men\u0161\u00ed projekty je lep\u0161\u00ed si vygenerovat vlastn\u00ed sprite s vybran\u00fdmi ikonami. <\/p>\n\n\n\n<p>A proto\u017ee nen\u00ed nic lep\u0161\u00edho  ne\u017e vyu\u017e\u00edt ji\u017e hotov\u00e9 n\u00e1stroje, m\u016f\u017eete pou\u017e\u00edt bal\u00ed\u010dek pro node.js, jen\u017e v\u00e1m generov\u00e1n\u00ed takov\u00e9ho spritu umo\u017en\u00ed &#8211; <a href=\"https:\/\/www.npmjs.com\/package\/fontawesome-svg-sprite-generator\" target=\"_blank\" rel=\"noopener\">https:\/\/www.npmjs.com\/package\/fontawesome-svg-sprite-generator<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Z\u00e1v\u011br<\/h2>\n\n\n\n<p>FontAwesome a jin\u00e9 ikono fonty jsou skv\u011bl\u00e9 v tom, \u017ee v\u00e1m umo\u017en\u00ed p\u0159id\u00e1vat jednodu\u0161e ikony do webov\u00e9 str\u00e1nky. I tady ale plat\u00ed, \u017ee pokud pou\u017e\u00edv\u00e1te n\u011bjak\u00fd z builder\u016f, jako Divi, Elementor a dal\u0161\u00ed, nem\u00e1te moc vliv na to, jak se bude FontAwesome pou\u017e\u00edvat. V\u0161echny ty p\u0159ipraven\u00e9 moduly pou\u017e\u00edvaj\u00ed v\u011bt\u0161inou font. Tak\u00e9 si dejte pozor na to, aby v\u00e1m pluginy a buildery nevkl\u00e1dali ka\u017ed\u00fd svou vlastn\u00ed verzi fontu, pak zjist\u00edte, \u017ee m\u00e1te na str\u00e1nce t\u0159i naprosto zbyte\u010dn\u00e9 requesty. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ikonky jsou ned\u00edlnou sou\u010d\u00e1st\u00ed ka\u017ed\u00e9ho webu. Nejpou\u017e\u00edvan\u011bj\u0161\u00ed \u0159e\u0161en\u00ed pro jejich vkl\u00e1d\u00e1n\u00ed do str\u00e1nky je Font Awesome. Uk\u00e1\u017eeme si, jak na to. Na za\u010d\u00e1tku byl takzvan\u00fd ikonofont. Tedy webfont, kter\u00fd m\u00edsto znak\u016f obsahoval speci\u00e1ln\u00ed symboly &#8211; ikony. Ka\u017ed\u00e1 ikonka m\u00e1 sv\u016fj specifick\u00fd k\u00f3d a d\u00edky css pseudoelementu :before se na m\u00edst\u011b htm tagu &lt;i&gt; zobraz\u00ed vybran\u00e1<\/p>\n","protected":false},"author":1,"featured_media":5699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[30],"tags":[],"class_list":["post-5670","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/5670"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=5670"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/5670\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/5699"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=5670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=5670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=5670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}