Tīmekļa izstrādātāji ir ļoti pieraduši izmantot ikonas, lai attēlotu konkrētu darbību, vai ikona var grafiski attēlot jebkuru komandu vai darbību vai indikatoru tīmekļa lapā. Ikonas tiek izmantotas dokumentos, kā arī lietojumprogrammās, un tās var būt atlasāmas vai neatlasāmas.
Piemēram, attēli, ko redzam uz lietojumprogrammas pogām, ir visas ikonas, un šīs pogas var atlasīt.
Lai atvieglotu vietņu dizainu un programmēšanu, ir izstrādātas dažas fontu ikonu bibliotēkas, tas ir, ikonas, kuras var ievietot tā, it kā tās būtu teksts un kuras būtu pieejamas izmantošanai vietnes HTML lapās, ietaupot daudz darba lietotāji, dizaineri un programmētāji.
Šajā apmācībā mēs apskatīsim dažas bibliotēkas, piemēram, Font Awesome, Bootstrap Glyphicons un Material Design Google, kas ir bibliotēkas ar iepriekš iestatītiem ikonu fontiem, ko bieži izmanto tīmekļa izstrādātāji.
Fontu satriecošie rīki un bibliotēka
Fonts Awesome ir fontu bibliotēka, kas renderē ikonas, izmantojot uz CSS balstītu rīku komplektu. Šis rīks ir izstrādāts lietošanai ar Twitter Bootstrap, bet to var izmantot atsevišķi kā stila lapas jebkurā vietnē.
CSS bibliotēkas priekšrocība ir tā, ka tā darbojas jebkurā pārlūkprogrammā un ierīcē un pat pielāgojas jebkurai ekrāna izšķirtspējai.
Jūs varat lejupielādēt bibliotēku no Font Awesome vietnes. Vēl viena iespēja ir izmantot tiešo saiti uz bibliotēku:
Apskatīsim piemēru kā ieviest ikonas sociālajos tīklos, izmantojot Font Awesome, mēs izveidojam html failu un pievienojam šādu kodu:
Fonts Awesome - sociālo mediju ikonas
Katru ikonu attēlo klases fa ikona, piemēram, YouTube ikona fa-youtube, rezultāts, parādot to pārlūkprogrammā, būs šāds:
Tad mēs varam pievienot savas CSS klases vai mainīt iepriekš definēto, lai pielāgotos mūsu dizainam, piemēram, starp head tagiem mēs pievienojam šādu CSS kodu.
Ikonu dekorēšana, izmantojot CSS
Tālāk mēs izpildām pārlūkprogrammā, un rezultāts būs šāds:
Mēs redzam, ka esam izmantojuši CSS katrai ikonai un neesam pievienojuši nevienu attēlu. Vēl viena iespēja uzlabot redzamību ir mainīt lidināties klase, tas ir, kad pele virzās virs ikonas, mainiet burta krāsu.
Lai to izdarītu, mēs mainām krāsu šādā rindā:
.social-icons .fa: hover {krāsa: zaļa; } Virzot kursoru virs ikonas, rezultāts būs šāds:
Mēs to varam izdarīt arī ar katras ikonas fonu, mainot fona rekvizītu uz krāsu, kas mums patīk.
Visas pieejamās ikonas var redzēt vietnē Font Awesome, ikonas ir sakārtotas pēc kategorijām.
Izmantojot šāda veida ikonu fontu mūsu tīmekļa dizainam, mēs varam paātrināt lapas ielādi, jo mums nav vajadzīgi attēli un piedāvājam augstāku kvalitāti (īpaši mobilajās ierīcēs, kad tiek tuvināta)
Glifikonu sāknēšanas rīki un bibliotēka
Glyphicons Bootstrap ir fontu ikonu bibliotēka. Tas piedāvā plašu ikonu klāstu fontu formātā. Šīs ikonas ir bezmaksas, un jūs varat arī paplašināt bibliotēku ar maksas ikonām. Bezmaksas ikonas var izmantot uz web dizainu balstītos projektos, tās nepērkot. Šī bibliotēka ir orientēta uz pogu ikonām, kas veic kādu funkciju, piemēram, drukāšanu, meklēšanu, saglabāšanu utt.
Šī bibliotēka ir iekļauta Bootstrap stila lapās, lai to izmantotu, mēs varam lejupielādēt Bootstrap no tās oficiālās lapas vai izmantot šo saiti:
Mēs varam arī redzēt ikonas pēc kategorijām Glifikonu lapā.
Tālāk aplūkosim piemēru, kurā šo bibliotēku izmantojam veidlapu pogām un datu ievades elementiem:
Glyphicon Bootstrap - pogasMēs pārbaudījām mobilajā ierīcē, kā tas izskatās:Glyphicon Bootstrap - pogas
Meklēt Drukāt Pieslēgties Pirkt
Mēs atlasītajam lietojam saraksta ikonu
Automašīnas Motocikli
Fontu ikonu vai fontu ikonu izmantošanas priekšrocības ir tādas, ka tas ietaupa vajadzību izsaukt attēlu vai ikonu, jo attēli bibliotēkas css failā ir svg formātā un šie attēli ir pielāgojami.
Pilna bibliotēka var būt no 10 KB līdz 40 KB, kas palielina vietnes ielādes ātrumu.
Ikonas ir teksts, tāpēc mēs varam ar tām manipulēt, izmantojot CSS, un tā reaģēs uz jebkuru notikumu, ko programmējam ar Jquery.
Ja rekvizītā CSS fonts mēs norādām fonta lielumu em piemēram, fonta lielums: 4em ikona būs atsaucīga un pielāgosies jebkurai ierīcei. Tos var izmantot arī, lai programmētu adaptīvas lietojumprogrammas ar ietvariem, kā redzams apmācībā, mobilo lietotņu programmēšanā ar Ionic Framework, šīs ikonas arī tiek izmantotas.
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
