Ikony písma jsou pro vaše stránky úžasné: Zde je proč

reklama

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 přesně stejná jako „běžná“ písma - 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, jak dobré je 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. Vzhledem k tomu, že jsou založeny na vektorech, lze pomocí nich změnit velikost, přesunout, stylizovat a změnit CSS 5 dětských kroků k učení CSS a stát se Kick-Ass CSS kouzelníkemCSS je jedna z nejdůležitějších změn, které webové stránky zaznamenaly v posledním desetiletí, a připravila cestu pro oddělení stylu a obsahu. XHTML moderně definuje sémantickou strukturu ... Přečtěte si více . 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

Budu používat Písmo Awesome pro tyto příklady, ale teorii lze aplikovat na mnoho dalších balíčků písem.

Zde je úvodní HTML:

Toto je minimální množství HTML potřebné k vytvoření webové stránky. Většinu 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 z jeho 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. Můžete zobrazit seznam všech ikony v Awesome písma na jejich webových stránkách.

Zkuste změnit ikonu z 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:

Ikony lze snadno otáčet - 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 písma ikon jsou 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 celkem jednoduchý, ale má velký dopad. Toto není výukový program CSS, takže možná budete chtít učit se CSS 10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minutChcete se dozvědět více o používání CSS? Vyzkoušejte tyto základní příklady kódu CSS a začněte je používat na své vlastní webové stránky. Přečtěte si více 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 {color: orange; 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. Animace volala 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 ně Weby šablony CSS 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í. Přečtěte si více , nebo tyto Kanály YouTube začít Chcete se naučit Web Design? 7 kanálů YouTube, které vám pomohou začítYouTube 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. Přečtěte si více 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!