Fontovi ikona su fantastični za vašu web lokaciju Evo evo zašto

Čuli ste za ikone i gotovo sigurno ste čuli za fontove, ali što je to Font ikone? Danas ću vam pokazati što su fontovi ikona i kako ih možete upotrijebiti za oživljavanje vaše web stranice. Započnimo.

Što su ikone fontova?

Fontovi ikona potpuno su isti kao “redovan” fontovi - oni određuju izgled i tekst teksta. Velika razlika ovdje je da fontova ikona ne sadrže slova i brojeve, već simbole i ikone. Možda vas ovo zbunjuje, kao što je dobra font ako ne možete pisati pisma majci!

Fontovi ikona uglavnom se koriste za oblikovanje web stranica. Kako se temelje na vektoru, mogu se promijeniti veličinu, premjestiti, oblikovati i izmijeniti pomoću CSS 5 Baby koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjakom 5 Dječjih koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjak CSS je Najvažnije promjene web stranica u posljednjem desetljeću i utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu…. To pruža veliku prednost u odnosu na tradicionalne metode dizajna, kao što su slike. Izgled velikog broja ikona može se mijenjati sa samo nekoliko redaka koda. Ne morate uređivati ​​nijednu sliku, otvarati Photoshop ili prenositi nove datoteke - samo pišete kôd.

Početak rada

Za ove ću primjere koristiti Font Awesome, ali teorija se može primijeniti na mnoge druge pakete fontova.

Evo početnog HTML-a:

    MUO Icon Fontovi html familija fontova: helvetica, arial;      

Ovo je minimalna količina HTML-a potrebna za izradu web stranice. Neću objasniti većinu toga, jer smo to objavili u našem vodiču o tome kako napraviti web stranicu.

Najvažnija je sljedeća linija:

To učitava tablicu stila Awesome sa svog CDN-a. Bez ove linije, vaša web stranica ne bi znala što je Font Awesome, tako da je vrlo važno. Ova tablica stilova obrađuje sav naporni rad na ugradnji web-fontova i općenito vam olakšava stvari.

Ikone za fantastične fontove definirane su CSS klasama dodanima u ja oznake. Oni su odabrani jer na njima nije priključen nijedan preglednik ili zadani stil, tako da se vaše ikone neće pobrkati. Alternativno, možete dodati klase u pedalj oznake, ali to vam pretrpava HTML.

Evo osnovne uporabe. Stavite ovo u svoje tijelo oznake:

 Moja prva ikona

Evo kako to izgleda:

Koliko je to jednostavno bilo? Razbijemo ga. Potrebne su dvije klase da Font Awesome radi. Prvi se zove fa, što stoji za Font Awesome. Ovo je potrebno za bilo koju ikonu, bez obzira koju koristite. Druga klasa određuje određenu ikonu koju želite koristiti - to može biti bilo šta, avion, osoba ili kreditna kartica. Ovo je također prefiks fa, a kako je ovo ikona zupčanika, ime joj je fa-cog. Na svim njihovim web stranicama možete vidjeti popis svih ikona u Font Awesome.

Pokušajte promijeniti ikonu zupčanika u bilo koju drugu.

Idete dublje

Jednom kada upoznate osnove, vrijeme je za neke napredne trikove.

Ako ne želite pisati svoj CSS, možete koristiti stilove ugrađene pravo u Font Awesome. Postoji mnogo klasa pomoću kojih možete povećati ikone:

Još jedna korisna klasa koju koristimo je fa-spin. Tako ćete se ikone okretati i u kombinaciji s prethodnim klasama veličine možete proizvesti neke lijepe efekte. Evo koda:

Evo rezultata:

Zakretanje ikona je lako - koristite fa rotiranja klasa:

Broj na kraju definira stupnjeve rotacije ikone, ali nemojte se zamarati. Ograničeni ste na 90, 180, ili 270.

Posljednji trik koji možete učiniti je slaganje. fa-stog klasa omogućuje kombiniranje dvije ili više ikona zajedno. Evo koda:

Evo kako to izgleda:

Jednom kada počnete kombinirati sve te različite klase, mogućnosti su zaista beskrajne.

Prilagođeni CSS

Jer su fontovi ikona samo fontove, možete ih stilski koristiti s CSS-om kao i bilo koji drugi element. Korištenje malog CSS3 može ići dosta:

Evo HTML-a za tu ikonu:

Evo CSS-a:

@keyframes pomaknite od margin-left: 0;  do margina-lijevo: 400px;  .bike animacija-ime: premjestiti; animacija-trajanje: 4s; 

Ovaj CSS je sasvim osnovni, ali ima veliki utjecaj. Ovo ipak nije CSS udžbenik, pa ćete možda htjeti naučiti CSS Sljedeće korake na putu da postanete CSS Majstor Jedi Sljedeći koraci na putu da postanete CSS Jedi Master CSS apsolutno je jedna od najvažnijih tehnologija u danas na Internetu, i dok većina ljudi priznaje da poznaje malo HTML-a, mi o CSS-u uglavnom ne znamo. Prošli put kad sam vas predstavio ... ako želite znati više o unutarnjem funkcioniranju.

Ako zaista želite, možete učiniti neke posebne stvari:

Ovo se malo muca kako bi se smanjila veličina datoteke za web. Evo HTML-a:

Evo CSS-a:

@keyframes blijedi from opacity: 0;  do neprozirnost: 1;  .person neprozirnost: 0; animacija-ime: izblijediti;  # p1 boja: crvena; trajanje animacije: 2s;  # p2 boja: narančasta; animacija-trajanje: 4s;  # p3 boja: zelena; animacija-trajanje: 6s;  # p4 animacija-trajanje: 8s; 

Kao i prethodni primjer, i ovaj koristi CSS3 animacije. Animacija zvana uvenuti se kreira i svaka ikona osobe provodi ovu animaciju s različitim vremenskim razmacima. Puno je potencijala da se ove ikone i CSS3 počnu diviti.

To je sve za danas. Sada biste trebali koristiti ikone Fontovi za oživljavanje vaše web stranice! Ako još niste sigurni u svoje vještine, pogledajte ove stranice CSS predloška 11 Web stranice CSS predloška: Ne počinjte od nule! 11 CSS web stranice predloška: Ne počinjte od nule! Na mreži su dostupne tisuće besplatnih CSS predložaka, a sve obuhvaća moderne trendove dizajna i tehnologije. Možete ih koristiti u njihovom izvornom obliku ili ih prilagoditi tako da ih učine vlastitim. ili ove YouTube kanale za početak Želite li naučiti web dizajn? 7 YouTube kanala za početak rada Želite li naučiti web dizajn? 7 YouTube kanala za početak YouTube YouTube sadrži tisuće videozapisa i kanala za početnike web dizajna. Ovdje ćemo pogledati neke od najboljih za početak. s web dizajnom.

Jeste li danas naučili nešto novo? Koji je vaš omiljeni Icon Font? Javite nam u komentarima u nastavku!