Ikony Písma sú pre vaše stránky úžasné: Tu je dôvod

Reklama

Už ste počuli o ikonách a takmer určite ste počuli o písmach, ale čo je to Ikona Písmo? Dnes vám ukážem, aké sú ikony ikon a ako ich môžete použiť na oživenie svojho webu. Začnime.

Čo sú fonty ikon?

Ikonové písma sú úplne rovnaké ako „bežné“ písma - definujú vzhľad a dojem časti textu. Veľký rozdiel je v tom, že fonty ikon neobsahujú písmená a čísla, ale symboly a ikony. Môžete byť zmätení tým, čo je dobré písmo, ak nemôžete písať listy svojej matke!

Ikony písiem sa primárne používajú na úpravu webových stránok. Keďže sú založené na vektoroch, je možné pomocou nich zmeniť veľkosť, presunúť ich, upraviť ich veľkosť a zmeniť ich CSS 5 detských krokov k učeniu CSS a stať sa čarodejníkom Kick-Ass CSSCSS je najdôležitejšou webovou stránkou zmien, ktorá sa zaznamenala za posledné desaťročie, a pripravila pôdu pre oddelenie štýlu a obsahu. XHTML definuje moderne sémantickú štruktúru ... Čítaj viac . To poskytuje obrovskú výhodu oproti tradičným metódam navrhovania, ako sú obrázky. Vzhľad a dojem veľkého počtu ikon je možné zmeniť iba pomocou niekoľkých riadkov kódu. Nemusíte upravovať žiadne obrázky, otvárať Photoshop ani nahrávať nové súbory - stačí napísať kód.

Začíname

Budem používať Písmo Awesome pre tieto príklady, ale teória sa dá uplatniť na mnoho ďalších balíkov fontov.

Tu je úvodný kód HTML:

Toto je minimálne množstvo HTML potrebné na vytvorenie webovej stránky. Nevysvetľujem väčšinu z toho, pretože sme to opísali v našom sprievodcovi ako vytvoriť webovú stránku.

Najdôležitejšou položkou je:

Týmto sa načíta šablóna so štýlmi Font Awesome z jeho CDN. Bez tohto riadku by váš web nevedel, čo je písmo Awesome, takže je to celkom dôležité. Táto šablóna so štýlmi zvláda všetky náročné úlohy vkladania webových písiem a vo všeobecnosti vám všetko oveľa uľahčuje.

Ikony Úžasné písma sú definované triedami CSS pridanými do ja tagy. Vybrali ste ich, pretože k nim nie je pripojený žiadny prehliadač ani predvolený štýl, takže vaše ikony nebudú úplne zmätené. Prípadne môžete triedy pridať rozpätie tagy, ale to zjemní váš HTML.

Tu je základné použitie. Dajte to do svojho telo tagy:

 Moja prvá ikona

Vyzerá to takto:

Aké ľahké to bolo? Poďme to rozobrať. Na prácu s písaním Awesome sú potrebné dve triedy. Prvý sa volá fa, čo znamená Font Awesome. Je to potrebné pre akúkoľvek ikonu bez ohľadu na to, ktorú používate. Druhá trieda určuje konkrétnu ikonu, ktorú chcete použiť - môže to byť čokoľvek, lietadlo, osoba alebo kreditná karta. Toto je tiež predponou faa keďže ide o ikonu ozubeného kolieska, nazýva sa jeho názov fa-cog. Môžete zobraziť zoznam všetkých ikony v aplikácii Font Awesome na ich webových stránkach.

Skúste zmeniť ikonu z ozubeného na iný.

Hlbšie

Akonáhle poznáte základy, je čas na nejaké pokročilé triky.

Ak nechcete písať svoj vlastný CSS, môžete použiť štýly zabudované priamo do Awesome písma. Na zväčšenie ikon môžete použiť veľa tried:

Ďalšou užitočnou triedou na použitie je fa-spin. To spôsobí, že sa ikony otáčate, a ak sa skombinujú s predchádzajúcimi triedami veľkostí, môžete vytvoriť pekné efekty. Tu je kód:

Tu je výsledok:

Ikony sa ľahko otáčajú - použite ikonu fa-rotate trieda:

Číslo na konci určuje stupne rotácie ikony, ale nenechajte sa uniesť. Ste obmedzení na 90, 180alebo 270.

Posledným trikom, ktorý môžete urobiť, je stohovanie. fa-stack trieda umožňuje kombinovať dve alebo viac ikon dohromady. Tu je kód:

Vyzerá to takto:

Akonáhle začnete kombinovať všetky tieto rôzne triedy, možnosti sú skutočne nekonečné.

Vlastné CSS

Pretože ikony písma sú proste fonty, môžete ich upravovať pomocou CSS rovnako ako akýkoľvek iný prvok. Použitie malého CSS3 môže byť dlhá cesta:

Tu je kód HTML pre túto ikonu:

Tu je CSS:

@keyframes move {from {margin-left: 0; } do {okraj-doľava: 400px; } } .bike {animation-name: move; trvanie animácie: 4s; }

Tento CSS je celkom jednoduchý, má však veľký vplyv. Toto nie je výukový program CSS, možno budete chcieť učiť sa CSS 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minútChcete sa dozvedieť viac o používaní CSS? Vyskúšajte tieto základné príklady kódu CSS a začnite ich používať na svoje vlastné webové stránky. Čítaj viac ak sa chcete dozvedieť viac o vnútornom fungovaní.

Ak naozaj chcete: Môžete robiť niektoré špeciálne veci:

To trochu koktá, aby sa zmenšila veľkosť súboru pre web. Tu je kód HTML:

Tu je CSS:

@keyframes fade {from {opacity: 0; } do {opacity: 1; } } .person {opacity: 0; animation-name: fade; } # p1 {color: red; trvanie animácie: 2 s; } # p2 {farba: oranžová; trvanie animácie: 4s; } # p3 {farba: zelená; trvanie animácie: 6 s; } # p4 {trvanie animácie: 8 s; }

Podobne ako v predchádzajúcom príklade sa používajú animácie CSS3. Animácia sa volá zvädnúť je vytvorený a ikona každej osoby túto animáciu implementuje s rôznym časovaním. S týmito ikonami a CSS3 je veľa možností.

To je na dnes všetko. Teraz by ste mali byť schopní používať Icon Fonts na oživenie svojej webovej stránky! Ak si ešte nie ste istí svojimi schopnosťami, vyskúšajte si ich Stránky šablón CSS 11 stránok šablón CSS: Nezačínajte od nuly!K dispozícii sú tisíce bezplatných šablón CSS online, ktoré zahŕňajú moderné trendy a technológie dizajnu. Môžete ich použiť v ich pôvodnej podobe alebo ich prispôsobiť tak, aby boli vlastné. Čítaj viac , alebo tieto Kanály YouTube začať Chcete sa naučiť Web Design? 7 kanálov YouTube, ktoré vám pomôžu začaťYouTube má tisíce videí a kanálov pre začiatočníkov s webovým dizajnom. Tu sa pozrieme na niektoré z najlepších na začiatok. Čítaj viac s webovým dizajnom.

Naučili ste sa dnes niečo nové? Aká je tvoja obľúbená ikona písma? Dajte nám vedieť v komentároch nižšie!