Ikooni fondid on teie saidi jaoks hämmastavad: siin on põhjus

Reklaam

Olete kuulnud ikoonidest ja peaaegu kindlasti kuulnud ka fontidest, kuid mis on Ikooni font? Täna näitan teile, millised ikoonifondid on ja kuidas saate neid oma veebisaidi elavdamiseks kasutada. Alustame.

Mis on ikoonifondid?

Ikooni fondid on täpselt samad, mis “tavalised” fondid - need määravad teksti tüki ilme. Suur erinevus on selles, et ikoonifondid ei sisalda tähti ja numbreid, vaid sümboleid ja ikoone. See võib teid segadusse ajada, kuna hea font on, kui te ei saa emale tähti kirjutada!

Ikooni fonte kasutatakse peamiselt veebisaitide stiilimiseks. Kuna need on vektoripõhised, saab neid kasutades muuta, teisaldada, kujundada ja muuta CSS 5 beebi sammu CSS-i õppimiseks ja Kick-Ass CSS-i nõiaks saamiseksCSS on viimase kümnendi jooksul kõige olulisemad muudatuste veebilehed ja see sillutas teed stiili ja sisu eraldamiseks. Kaasaegsel viisil määratleb XHTML semantilise struktuuri ... Loe rohkem . See annab tohutu eelise traditsiooniliste disainimeetodite, näiteks piltide ees. Suure hulga ikoonide ilmet saab muuta vaid mõne koodirea abil. Te ei pea ühtegi pilti redigeerima, Photoshopit avama ega uusi faile üles laadima - kirjutage lihtsalt kood.

Alustamine

Ma kasutan Font vinge nende näidete jaoks, kuid teooriat saab rakendada ka paljudele teistele fontipakettidele.

Siin on käivitus HTML:

See on minimaalne HTML-i arv, mis on vajalik veebilehe tootmiseks. Ma ei seleta seda enamikku, kuna oleme seda oma juhendis käsitlenud kuidas teha veebisaiti.

Kõige olulisem rida on järgmine:

See laadib stiililahenduse Font Awesome sellelt CDN. Ilma selle reata ei teaks teie veebisait, mis on Font Awesome, seega on see üsna oluline. See stiilileht tegeleb kogu veebifondide manustamise raske tööga ja teeb selle teie jaoks üldiselt palju lihtsamaks.

Fondi vingeid ikoone määratlevad CSS-i klassid, mis on lisatud i sildid. Need valiti, kuna neil pole ühtegi brauserit või vaikimisi määratletud stiili, nii et teie ikoonid ei lähe kõigisse segadusse. Teise võimalusena võite klassid lisada span silte, kuid see ei sega teie HTML-i.

Siin on põhikasutus. Pange see enda sisse keha sildid:

 Minu esimene ikoon

See näeb välja järgmine:

Kui lihtne see oli? Jagage see ära. Font Awesome'i kasutamiseks on vaja kahte klassi. Esimene on nn fa, mis tähendab Font Awesome. See on vajalik iga ikooni jaoks, sõltumata sellest, millist ikooni kasutate. Teine klass määratleb konkreetse ikooni, mida soovite kasutada - see võib olla ükskõik, lennuk, inimene või krediitkaart. See on ka eesliitega faja kuna see on hammaste ikoon, on selle nimi fa-cog. Saate vaadata kõigi ikoonid kirjas Fantastiline nende veebisaidil.

Proovige muuta ikooni hammasrattalt mõnele teisele.

Läheb sügavamale

Kui olete põhitõed teada saanud, on aeg teha täiendavaid trikke.

Kui te ei soovi oma CSS-i kirjutada, saate kasutada otse rakendusse Font Awesome sisseehitatud stiile. Ikoonide suurendamiseks saab kasutada palju klasse:

Veel üks kasulik klass, mida kasutada, on fa-spin. See paneb ikoone pöörlema ​​ja eelmiste suurusklassidega kombineerituna saate luua toredaid efekte. Siin on kood:

Siin on tulemus:

Ikoonide pööramine on lihtne - kasutage nuppu fa-pöörama klass:

Lõpus olev number tähistab ikooni pöördenurki, kuid ärge viige seda minema. Sa oled piiratud 90, 180või 270.

Viimane trikk, mida saate teha, on virnastamine. fa-stack klass võimaldab teil ühendada kaks või enam ikooni. Siin on kood:

See näeb välja järgmine:

Kui hakkate kõiki neid erinevaid klasse kombineerima, on võimalused tõesti lõputud.

Kohandatud CSS

Kuna ikoonifondid on lihtsalt fonte, saate neid CSS-iga stiilida nagu iga teise elemendi puhul. Väikese CSS3 kasutamine võib minna kaugele:

Selle ikooni HTML on järgmine:

Siin on CSS:

@ võtmeraamid liiguvad {{marginaal vasakult: 0; } kuni {veerise vasakpoolne: 400 pikslit; } } .bike {animatsioon-nimi: teisalda; animatsiooni kestus: 4 s; }

See CSS on üsna põhiline, kuid sellel on suur mõju. See pole siiski CSS-i õpetus, seega võiksite seda soovida õppige CSS-i 10 lihtsat CSS-koodi näidet, mida saate õppida 10 minutigaKas soovite CSS-i kasutamise kohta rohkem teada saada? Alustuseks proovige neid CSS-koodi põhinäiteid ja rakendage need siis oma veebilehtedele. Loe rohkem kui soovite rohkem teada saada sisemisest tööst.

Võite tõesti teha mõnda erilist asja:

Veebifaili mahu vähendamiseks see haiseb natuke. Siin on HTML:

Siin on CSS:

@ võtmeraamid tuhmuvad {alates {läbipaistmatus: 0; } kuni {läbipaistmatus: 1; } } .person {läbipaistmatus: 0; animatsioon-nimi: tuhmuma; } # p1 {värv: punane; animatsiooni kestus: 2 s; } # p2 {värv: oranž; animatsiooni kestus: 4 s; } # p3 {värv: roheline; animatsiooni kestus: 6 s; } # p4 {animatsiooni kestus: 8 s; }

Nagu eelmine näide, kasutab see ka CSS3 animatsioone. Animatsioon nimega tuhmuma luuakse ja iga inimese ikoon rakendab seda animatsiooni erineva ajastamisega. Nende ikoonide ja CSS3 abil on looduses palju potentsiaali.

See on tänapäeva jaoks kõik. Nüüd peaksite oma ikooni fonte kasutama oma veebisaidi elavdamiseks! Kui te pole oma oskuste osas veel nii kindel, vaadake neid CSS-mallisaidid 11 CSS-malli saiti: ärge alustage nullist!Veebis on saadaval tuhandeid tasuta CSS-i malle, mis kõik hõlmavad tänapäevaseid disaini suundumusi ja tehnoloogiaid. Saate neid kasutada nende algsel kujul või kohandada neid enda jaoks sobivaks. Loe rohkem või neid YouTube'i kanalid alustamiseks Kas soovite õppida veebidisaini? 7 YouTube'i kanalit, millega alustadaYouTube'is on veebidisaini alustajatele tuhandeid videoid ja kanaleid. Siin vaatleme mõnda parimat alustamiseks. Loe rohkem veebidisainiga.

Kas õppisite täna midagi uut? Mis on teie lemmikikooni font? Andke meile allolevates kommentaarides teada!