Žiniatinklio kūrėjai yra labai įpratę naudoti piktogramas konkrečiam veiksmui pavaizduoti arba piktograma gali grafiškai pavaizduoti bet kurią komandą ar veiksmą ar indikatorių tinklalapyje. Piktogramos naudojamos dokumentuose ir programose ir gali būti pasirenkamos arba nepasirinktos.
Pavyzdžiui, vaizdai, kuriuos matome programos mygtukuose, yra visos piktogramos ir šiuos mygtukus galima pasirinkti.
Siekiant palengvinti svetainių kūrimą ir programavimą, buvo sukurtos kai kurios šriftų piktogramų bibliotekos, tai yra piktogramos, kurias galima įterpti tarsi tekstą ir kurias galima naudoti svetainės HTML puslapiuose, taip sutaupant daug darbo vartotojai, dizaineriai ir programuotojai.
Šioje pamokoje apžvelgsime kai kurias bibliotekas, tokias kaip „Font Awesome“, „Bootstrap Glyphicons“ ir „Material Design Google“, kurios yra bibliotekos su iš anksto nustatytais piktogramų šriftais, kuriuos dažnai naudoja žiniatinklio kūrėjai.
Nuostabūs šrifto įrankiai ir biblioteka
Nuostabus šriftas yra šriftų biblioteka, kurioje atvaizduojamos piktogramos naudojant CSS įrankių rinkinį. Šis įrankis sukurtas naudoti su „Twitter Bootstrap“, tačiau jį galima naudoti atskirai kaip stiliaus lapus bet kurioje svetainėje.
CSS bibliotekos pranašumas yra tas, kad ji veikia bet kurioje naršyklėje ir įrenginyje ir netgi prisitaiko prie bet kokios ekrano skiriamosios gebos.
Biblioteką galite atsisiųsti iš „Font Awesome“ svetainės. Kita galimybė yra naudoti tiesioginę bibliotekos nuorodą:
Pažiūrėkime pavyzdį kaip įdiegti piktogramas socialiniams tinklams naudojant „Font Awesome“, sukuriame html failą ir pridedame šį kodą:
Nuostabus šriftas - socialinės žiniasklaidos piktogramos
Kiekvieną piktogramą žymi klasės fa piktograma, taigi, pavyzdžiui, bus „YouTube“ piktograma fa-youtube, rodant naršyklėje rezultatas bus toks:
Tada galime pridėti savo CSS klases arba modifikuoti iš anksto nustatytą, kad prisitaikytume prie mūsų dizaino, pavyzdžiui, tarp galvos žymių pridedame šį CSS kodą.
Piktogramų dekoravimas naudojant CSS
Toliau vykdome naršyklėje ir rezultatas bus toks:
Matome, kad kiekvienai piktogramai pritaikėme CSS ir nepridėjome jokių vaizdų. Kita galimybė pagerinti matomumą yra pakeisti sklandymo klasė, tai yra, kai pelė užvedama ant piktogramos, pakeiskite raidės spalvą.
Norėdami tai padaryti, mes pakeičiame spalvą šioje eilutėje:
.social-icons .fa: hover {spalva: žalia; } Užvedus pelės žymeklį virš piktogramos rezultatas bus toks:
Taip pat galime tai padaryti su kiekvienos piktogramos fonu, pakeisdami fono ypatybę į mums patinkančią spalvą.
Visas galimas piktogramas galima pamatyti „Font Awesome“ svetainėje, piktogramos yra suskirstytos pagal kategorijas.
Naudodami tokio tipo piktogramų šriftus mūsų interneto dizainams, galime pagreitinti puslapio įkėlimą, nes mums nereikia vaizdų ir siūlome aukštesnę kokybę (ypač mobiliuosiuose įrenginiuose, kai priartinama)
„Glyphicons Bootstrap“ įrankiai ir biblioteka
„Glyphicons Bootstrap“ yra šrifto piktogramų biblioteka. Jis siūlo daugybę įvairių piktogramų šrifto formatu. Šios piktogramos yra nemokamos, taip pat galite išplėsti biblioteką naudodami mokamas piktogramas. Nemokamos piktogramos gali būti naudojamos projektuojant žiniatinklio dizainą, jų nereikia pirkti. Ši biblioteka orientuota į mygtukų, atliekančių tam tikras funkcijas, pvz., Spausdinimo, paieškos, išsaugojimo ir kt., Piktogramas.
Ši biblioteka yra įtraukta į „Bootstrap“ stiliaus lapus, norėdami ją naudoti, galime atsisiųsti „Bootstrap“ iš oficialaus puslapio arba naudoti šią nuorodą:
„Glyphicons“ puslapyje taip pat galime pamatyti piktogramas pagal kategorijas.
Toliau pažiūrėkime pavyzdį, kuriame šią biblioteką naudojame mygtukų piktogramoms ir formos įvedimo elementams:
„Glyphicon Bootstrap“ - sagosMes išbandėme mobiliajame įrenginyje, kaip atrodytų:„Glyphicon Bootstrap“ - sagos
Paieška Spausdinti Prisijungti Pirkti
Mes pasirenkame sąrašo piktogramą
Automobiliai Motociklai
Šriftų piktogramų ar šriftų piktogramų naudojimo pranašumai yra tai, kad taupoma galimybė iškviesti vaizdą ar piktogramą, nes bibliotekos css faile vaizdai yra svg formato ir šie vaizdai yra keičiami.
Visa biblioteka gali būti nuo 10 KB iki 40 KB, o tai padidina svetainės įkėlimo greitį.
Piktogramos yra tekstas, todėl galime jas manipuliuoti naudodami CSS ir ji reaguos į bet kokį įvykį, kurį programuojame naudodami „Jquery“.
Jei CSS šrifto ypatybėje nurodome šrifto dydį em pavyzdžiui, šrifto dydis: 4em piktograma reaguoja ir prisitaiko prie bet kurio įrenginio. Jie taip pat gali būti naudojami programuojant reaguojančias programas su sistemomis, kaip parodyta mokymo programoje, programuojant mobilias programas su „Ionic Framework“, šios piktogramos taip pat naudojamos.
Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
