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

Oglas

Čuli ste ikone i gotovo sigurno ste čuli fontove, ali šta 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 ikonski fontovi?

Fontovi ikona potpuno su isti kao i "obični" fontovi - oni određuju izgled i tekst teksta. Velika je razlika ovdje u tome što fontovi ikona ne sadrže slova i brojeve, već simbole i ikone. Možda vas ovo zbunjuje, kao što je dobar font ako ne možete pisati pisma majci!

Fontovi ikona uglavnom se koriste za oblikovanje web stranica. Kako se temelje na vektoru, pomoću njih se može promijeniti veličina, pomicanje, oblikovanje i promjena CSS 5 bebi koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjakCSS je najvažnija promjena web stranica u posljednjem desetljeću, a utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu ... Čitaj više . To pruža veliku prednost u odnosu na tradicionalne metode dizajna, kao što su slike. Izgled velikog broja ikona može se promijeniti sa samo nekoliko redaka koda. Ne morate uređivati ​​nikakve slike, otvarati Photoshop ili prenositi nove datoteke - samo pišete kôd.

Početak rada

Koristit ću se Awesome slova za ove primjere, ali teorija se može primijeniti na mnoge druge pakete fontova.

Evo sljedećeg HTML-a:

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

Najvažnija je sljedeća linija:

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

Ikone za strašan font 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. Ili možete dodati klase u pedalj oznake, ali to vam pretrpava HTML.

Evo osnovne upotrebe. Stavite ovo u svoje tijelo oznake:

 Moja prva ikona

Evo kako to izgleda:

Koliko je to jednostavno bilo? Rastavimo ga. Potrebne su dvije klase da Font Awesome radi. Prvi se zove fa, što zastupa 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. Možete vidjeti popis svih ikone u fontu Awesome na njihovoj web stranici.

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

Idete dublje

Nakon što upoznate osnove, vrijeme je za napredne trikove.

Ako ne želite pisati vlastiti 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 određuje stupnjeve rotacije ikone, ali nemojte se oduzeti. 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 možda biste željeli naučite CSS 10 jednostavnih primjera CSS koda koje možete naučiti u 10 minutaŽelite znati više o korištenju CSS-a? Pokušajte s ovim osnovnim primjerima CSS koda, a zatim ih primijenite na vlastite web stranice. Čitaj više ako želite znati više o unutarnjem funkcioniranju.

Ako stvarno ž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 {trajanje animacije: 8s; }

Kao i prethodni primjer, i ovaj koristi CSS3 animacije. Animacija pod nazivom uvenuti stvorena je i svaka ikona osobe provodi ovu animaciju s različitim vremenskim razmacima. Postoji puno potencijala koji mogu postati divlji s ovim ikonama i CSS3.

To je sve za danas. Sada biste trebali koristiti ikone Fontovi za oživljavanje vaše web stranice! Ako još niste sigurni u svoje sposobnosti, pogledajte ove CSS web stranice predloška 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 izvornom obliku ili ih prilagoditi tako da ih učine vlastitim. Čitaj više ili ove YouTube kanali za početak Želite naučiti web dizajn? 7 YouTube kanala za početakYouTube ima tisuće videozapisa i kanala za početnike web dizajna. Ovdje ćemo pogledati neke od najboljih za početak. Čitaj više s web dizajnom.

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