Piktogramų šriftai yra nuostabūs jūsų svetainei: Štai kodėl

Skelbimas

Jūs girdėjote apie piktogramas ir beveik neabejotinai girdėjote apie šriftus, bet kas tai yra Piktogramos šriftas? Šiandien aš jums parodysiu, kokie yra piktogramų šriftai ir kaip galite juos naudoti pagyvinti savo svetainę. Pradėkime.

Kas yra piktogramų šriftai?

Piktogramų šriftai yra visiškai tokie patys kaip „įprastų“ šriftų - jie apibūdina teksto dalį ir išvaizdą. Didelis skirtumas yra tas, kad piktogramų šriftuose nėra raidžių ir skaičių, bet simboliai ir piktogramos. Tai gali jus supainioti, nes koks šriftas yra geras, jei negalite rašyti laiškų savo mamai!

Piktogramų šriftai pirmiausia naudojami svetainėms formuoti. Kadangi jie yra vektoriniai, jų dydį galima keisti, perkelti, formuoti ir keisti naudojant CSS 5 kūdikio žingsniai norint išmokti CSS ir tapti „Kick-Ass CSS burtininku“CSS yra vienintelis svarbiausias per pastarąjį dešimtmetį matomas internetinis puslapis, kuris padėjo atskirti stilių ir turinį. Šiuolaikiniu būdu XHTML nusako semantinę struktūrą ... Skaityti daugiau

. Tai suteikia didžiulį pranašumą prieš tradicinius projektavimo metodus, tokius kaip vaizdai. Daugybės piktogramų išvaizdą galima pakeisti tik keliomis kodo eilutėmis. Jums nereikia redaguoti jokių vaizdų, atidaryti „Photoshop“ ar įkelti naujų failų - jūs tiesiog rašote kodą.

Darbo pradžia

Aš naudojuosi Nuostabus šriftas šiems pavyzdžiams, tačiau teoriją galima pritaikyti daugeliui kitų šriftų paketų.

Štai pradinis HTML:

Tai yra minimalus HTML kiekis, reikalingas tinklalapiui sukurti. Aš nepaaiškinsiu jų daugumos, nes mes tai aprašėme savo vadove kaip susikurti svetainę.

Svarbiausia eilutė yra ši:

Iš jo įkeliama „Font Awesome“ stiliaus lentelė CDN. Be šios eilutės jūsų svetainė nežinotų, kas yra „Font Awesome“, todėl ji yra labai svarbi. Ši stiliaus lentelė atliepia visą sunkų web šriftų įdėjimo darbą ir paprastai tai jums palengvina.

Nuostabios šrifto piktogramos yra apibrėžtos CSS klasėmis, pridėtomis i žymės. Jie buvo pasirinkti, nes jie neturi jokios naršyklės ar pagal nutylėjimą apibrėžto stiliaus, todėl jūsų piktogramos nebus suklaidintos. Arba galite įtraukti klases į span žymas, tačiau tai nesugadina jūsų HTML.

Čia yra pagrindinis naudojimas. Įdėkite tai į savo vidų kūnas žymės:

 Mano pirmoji piktograma

Štai kaip tai atrodo:

Kaip lengva tai buvo? Išardykime. Norint dirbti „Font Awesome“, reikia dviejų klasių. Pirmasis vadinamas fa, kuris reiškia „Font Awesome“. Tai reikalinga bet kuriai piktogramai, nepriklausomai nuo to, kurią naudojate. Antroji klasė nurodo konkrečią piktogramą, kurią norite naudoti - tai gali būti bet kas, lėktuvas, asmuo ar kredito kortelė. Tai taip pat rašoma prieš fa, ir kadangi tai yra krumpliaračio piktograma, jos pavadinimas yra fa-cog. Galite peržiūrėti visų piktogramos „Font Awesome“ jų svetainėje.

Pabandykite pakeisti piktogramą iš krumpliaračio į kitą.

Važiuoju giliau

Kai žinai pagrindus, atėjo laikas atlikti sudėtingesnius triukus.

Jei nenorite rašyti savo CSS, galite naudoti stilius, pastatytus tiesiai į „Font Awesome“. Yra daugybė klasių, kurias galite naudoti norėdami padidinti piktogramas:

Kita naudinga klasė, kurią reikia naudoti fa-nugara. Tai privers jus pasukti piktogramas ir sujungę su ankstesnėmis dydžių klasėmis, galėsite sukurti keletą malonių efektų. Štai kodas:

Štai rezultatas:

Piktogramas lengva pasukti - naudokite fa-pasukti klasė:

Skaičius gale nurodo piktogramos pasukimo laipsnius, bet nenuvilsite. Jūs apsiribojate 90, 180, arba 270.

Paskutinis triukas, kurį galite padaryti, yra sukrauti. fa-kamino klasė leidžia sujungti dvi ar daugiau piktogramų kartu. Štai kodas:

Štai kaip tai atrodo:

Pradėjus derinti visus šiuos įvairius užsiėmimus, galimybių tikrai nėra.

Individualizuota CSS

Nes piktogramų šriftai yra tiesiog šriftus, galite juos formuoti naudodami CSS, kaip ir bet kurį kitą elementą. Naudojant šiek tiek CSS3, galima nueiti ilgą kelią:

Štai šios piktogramos HTML:

Štai CSS:

@ raktų rėmeliai juda {iš {kraštinė-kairė: 0; } į {kraštinę kairę: 400 pikselių; } } .bike {animation-name: move; animacijos trukmė: 4 s; }

Ši CSS yra gana paprasta, tačiau daro didelę įtaką. Vis dėlto tai nėra CSS mokymo programa, todėl galbūt norėsite mokytis CSS 10 paprastų CSS kodo pavyzdžių, kuriuos galite išmokti per 10 minučiųAr norite sužinoti daugiau apie CSS naudojimą? Iš pradžių išbandykite šiuos pagrindinius CSS kodo pavyzdžius, tada pritaikykite juos savo tinklalapiuose. Skaityti daugiau jei norite sužinoti daugiau apie vidinį darbą.

Galite padaryti keletą ypatingų dalykų, jei tikrai norite:

Tai šiek tiek mikčioja, kad būtų sumažintas žiniatinklio failo dydis. Štai HTML kodas:

Štai CSS:

@ raktų rėmeliai išnyks {nuo {neskaidrumas: 0; } iki {neskaidrumas: 1; } } .person {neskaidrumas: 0; animacijos vardas: išnyks; } # p1 {spalva: raudona; animacijos trukmė: 2 s; } # p2 {spalva: oranžinė; animacijos trukmė: 4 s; } # p3 {spalva: žalia; animacijos trukmė: 6 s; } # p4 {animacijos trukmė: 8 s; }

Kaip ir ankstesniame pavyzdyje, šiame naudojama CSS3 animacija. Animacija vadinama išnyks yra sukurtas, o kiekvieno asmens piktograma įgyvendina šią animaciją skirtingu laiku. Su šiomis piktogramomis ir CSS3 yra daugybė galimybių.

Tai viskas siandienai. Dabar turėtumėte galėti naudoti „Icon Fonts“, kad pagyvintumėte savo svetainę! Jei dar nesate tikri dėl savo įgūdžių, patikrinkite juos CSS šablonų svetainės 11 CSS šablonų svetainių: nepradėkite nuo nulio!Internete galima rasti tūkstančius nemokamų CSS šablonų, kuriuose yra visų šiuolaikinių dizaino tendencijų ir technologijų. Galite juos naudoti originalia forma arba tinkinti, kad padarytumėte juos savo. Skaityti daugiau , arba šie „YouTube“ kanalai norint pradėti Norite sužinoti internetinį dizainą? 7 „YouTube“ kanalai, kurie padės jums pradėti„YouTube“ yra tūkstančiai vaizdo įrašų ir kanalų, skirtų pradedantiesiems kurti web dizainą. Čia apžvelgiame pačius geriausius pradedantiesiems. Skaityti daugiau su interneto dizainu.

Ar šiandien sužinojai ką nors naujo? Koks yra jūsų mėgstamiausias piktogramos šriftas? Praneškite mums toliau pateiktuose komentaruose!