Ikony písma jsou pro váš web úžasné

Slyšeli jste o ikonách a téměř jistě jste slyšeli o písmech, ale co je Ikona písmo? Dnes vám ukážu, jaká jsou ikonová písma a jak je můžete použít k oživení vašeho webu. Začněme.

Co jsou ikony písma?

Písma ikon jsou úplně stejná jako “pravidelný” fonty - definují vzhled a dojem části textu. Velký rozdíl je v tom, že ikonová písma neobsahují písmena a čísla, ale symboly a ikony. Můžete být zmateni tím, co je dobré písmo, pokud nemůžete psát dopisy své matce!

Písma ikon jsou primárně používána ke stylu webových stránek. Protože jsou založeny na vektorech, lze je měnit, přesouvat, stylizovat a měnit pomocí CSS 5 Baby Steps k učení CSS a stát se Kick-Ass CSS Sorcerer 5 Baby Steps k učení CSS a stát se Kick-Ass CSS Sorcerer CSS V posledním desetiletí došlo k nejdůležitějším webovým stránkám pro změnu, které připravily cestu pro oddělení stylu a obsahu. XHTML moderně definuje sémantickou strukturu…. To poskytuje obrovskou výhodu oproti tradičním metodám návrhu, jako jsou obrázky. Vzhled a dojem velkého počtu ikon lze změnit pomocí několika řádků kódu. Nemusíte upravovat žádné obrázky, otevírat Photoshop ani nahrávat nové soubory - stačí napsat kód.

Začínáme

Pro tyto příklady budu používat Font Awesome, ale teorii lze aplikovat na mnoho dalších balíčků písem.

Zde je úvodní HTML:

    MUO Icon Fonts html font-family: helvetica, arial;      

Toto je minimální množství HTML potřebné k vytvoření webové stránky. Většinu z toho nebudu vysvětlovat, protože jsme to popsali v našem průvodci, jak vytvořit web.

Nejdůležitější řádek je následující:

Tím se načte šablona stylů Awesome ze své CDN. Bez tohoto řádku by váš web nevěděl, co je Font Awesome, takže je to docela důležité. Tato šablona stylů zpracovává veškerou těžkou práci s vkládáním webových písem a obecně vám vše mnohem usnadňuje.

Ikony Úžasné písmo jsou definovány třídami CSS přidanými do i značky. Byly vybrány, protože k nim není připojen žádný prohlížeč ani výchozí definovaný styl, takže vaše ikony nebudou všechny zmateny. Případně můžete třídy přidat rozpětí tagy, ale to zjemní váš HTML.

Zde je základní použití. Dejte to do svého tělo tagy:

 Moje první ikona

Vypadá to takto:

Jak snadné to bylo? Pojďme to rozebrat. Pro práci s písmem Awesome jsou zapotřebí dvě třídy. První se nazývá fa, což je zkratka pro Font Awesome. To je nutné pro jakoukoli ikonu, bez ohledu na to, kterou používáte. Druhá třída určuje konkrétní ikonu, kterou chcete použít - může to být cokoli, letadlo, osoba nebo kreditní karta. Toto je také předponou fa, a protože se jedná o ozubenou ikonu, její název je fa-cog. Na jejich webových stránkách si můžete prohlédnout seznam všech ikon v Font Awesome.

Zkuste změnit ikonu z ozubeného kolečka na jinou.

Jdeme hlouběji

Jakmile znáte základy, je čas na nějaké pokročilé triky.

Pokud nechcete psát svůj vlastní CSS, můžete použít styly zabudované přímo do Awesome písma. Pro zvětšení ikon můžete použít mnoho tříd:

Další užitečnou třídou je fa-spin. To způsobí, že se ikony otáčí, a ve spojení s předchozími velikostními třídami můžete vytvořit pěkné efekty. Zde je kód:

Zde je výsledek:

Je snadné otáčet ikony - použijte fa-rotate třída:

Číslo na konci určuje stupně otočení ikony, ale nenechte se unést. Jste omezeni na 90, 180, nebo 270.

Posledním trikem, který můžete udělat, je stohování. fa-stack třída umožňuje kombinovat dvě nebo více ikon dohromady. Zde je kód:

Vypadá to takto:

Jakmile začnete kombinovat všechny tyto různé třídy, možnosti jsou opravdu nekonečné.

Vlastní CSS

Protože jsou písma ikon prostě fonty, můžete je stylizovat pomocí CSS stejně jako jakýkoli jiný prvek. Použití malého CSS3 může jít dlouhou cestou:

Zde je kód HTML pro tuto ikonu:

Zde je CSS:

@keyframes move from margin-left: 0;  do margin left: 400px;  .bike animation-name: move; doba trvání animace: 4s; 

Tento CSS je docela základní, ale má velký dopad. Toto není výukový program CSS, takže se možná budete chtít naučit CSS Další kroky na cestě k tomu, aby se stal CSS Jedi Master Další kroky na cestě k tomu, aby se stal CSS Jedi Master CSS je absolutně jednou z nejdůležitějších technologií v okolí na internetu dnes, a zatímco většina lidí připouští, že znají trochu HTML, jsme obecně bezradní ohledně CSS. Naposledy jsem vás představil ... pokud se chcete dozvědět více o vnitřním fungování.

Pokud opravdu chcete, můžete udělat nějaké zvláštní věci:

To trochu koktá, aby se zmenšila velikost souboru pro web. Zde je HTML:

Zde je CSS:

@keyframes fade from opacity: 0;  do krytí: 1;  .person opacity: 0; animation-name: fade;  # p1 color: red; doba trvání animace: 2s;  # p2 barva: oranžová; doba trvání animace: 4s;  # p3 color: green; doba trvání animace: 6s;  # p4 trvání animace: 8s; 

Stejně jako v předchozím příkladu se používá animace CSS3. Nazvala se animace slábnout je vytvořen a ikona každé osoby tuto animaci implementuje s různým načasováním. S těmito ikonami a CSS3 je velký potenciál.

To je pro dnešek vše. Nyní byste měli být schopni používat Icon Fonts k oživení svého webu! Pokud si ještě nejste tak jistí svými dovednostmi, podívejte se na tyto weby se šablonami CSS. 11 Weby se šablonami CSS: Nezačínejte od nuly! 11 stránek CSS Template: Nezačínejte od nuly! Online jsou k dispozici tisíce šablon CSS zdarma a všechny zahrnují moderní trendy a technologie designu. Můžete je použít v jejich původní podobě, nebo je upravit tak, aby byly vlastní. , nebo tyto kanály YouTube pro začátek Chcete se naučit webový design? 7 kanálů YouTube, které vám pomohou začít Webový design se chcete naučit? 7 kanálů YouTube, které vám pomohou začít YouTube má tisíce videí a kanálů pro začátečníky s webovým designem. Zde se podíváme na některé z nejlepších, jak začít. s web design.

Naučili jste se dnes něco nového? Jaký je váš oblíbený Icon Font? Dejte nám vědět v komentářích níže!