Webutviklere er veldig vant til å bruke ikoner til å representere en bestemt handling, eller ikonet kan grafisk representere enhver kommando eller handling eller en indikator på en webside. Ikoner brukes både i dokumenter og i programmer og kan enten velges eller ikke velges.
For eksempel er bildene vi ser på knappene i et program alle ikoner, og disse knappene kan velges.
For å legge til rette for design og programmering av nettsteder har noen fontikonbiblioteker blitt utviklet, det vil si ikoner som kan settes inn som om de var tekst og er tilgjengelige for bruk på HTML -sidene på et nettsted, noe som sparer mye arbeid for brukere. designere og programmerere.
I denne opplæringen vil vi se på noen biblioteker som Font Awesome, Bootstrap Glyphicons og Material Design Google, som er biblioteker med forhåndsinnstilte ikonfonter som ofte brukes av webutviklere.
Font Awesome Tools and Library
Font Awesome er et fontbibliotek som gjengir ikoner ved hjelp av et sett med CSS-baserte verktøy. Dette verktøyet er utviklet for bruk med Twitter Bootstrap, men kan brukes individuelt som stilark på et hvilket som helst nettsted.
Fordelen med å være et CSS -bibliotek er at det fungerer på alle nettlesere og enheter og til og med tilpasser seg hvilken som helst skjermoppløsning.
Du kan laste ned biblioteket fra Font Awesome -nettstedet. Et annet alternativ er å bruke direkte lenken til biblioteket:
La oss se et eksempel på hvordan implementere ikoner for sosiale nettverk med Font Awesome, oppretter vi en html -fil og legger til følgende kode:
Font Awesome - Ikoner for sosiale medier
Hvert ikon er representert med et klasse fa-ikon, så for eksempel vil ikonet for YouTube være fa-youtube, vil resultatet ved visning i nettleseren være følgende:
Deretter kan vi legge til våre egne CSS -klasser eller endre den forhåndsdefinerte for å tilpasse oss designet, for eksempel mellom hodemerkene legger vi til følgende CSS -kode.
Ikondekorasjon via CSS
Neste kjører vi i nettleseren, og resultatet blir følgende:
Vi kan se at vi har brukt CSS på hvert ikon, og vi har ikke lagt til noen bilder. Et annet alternativ for å forbedre synligheten er å endre hover klasse, det vil si når musen holder musepekeren over et ikon, endrer du fargen på bokstaven.
For å gjøre dette endrer vi fargen på følgende linje:
.sosial-ikoner .fa: sveve {farge: grønn; } Resultatet når du holder markøren over et ikon vil være følgende:
Vi kan også gjøre det med bakgrunnen til hvert ikon, endre bakgrunnsegenskapen for en farge vi liker.
Alle tilgjengelige ikoner kan sees på Font Awesome -nettstedet, ikonene er organisert etter kategorier.
Ved å bruke denne typen ikonfont for våre webdesigner kan vi øke hastigheten på innlasting av siden siden vi ikke trenger bilder og tilbyr en høyere kvalitet (spesielt på mobile enheter når du zoomer)
Glyphicons Bootstrap -verktøy og bibliotek
Glyphicons Bootstrap er et fontikonbibliotek. Det tilbyr et stort utvalg av ikoner i skriftformat. Disse ikonene er gratis, og du kan også utvide biblioteket med betalte ikoner. Gratis ikoner kan brukes i webdesignbaserte prosjekter uten å måtte kjøpe dem. Dette biblioteket er orientert mot ikoner for knapper som utfører noen funksjoner som utskrift, søk, lagring, etc.
Dette biblioteket er inkludert som stilark i Bootstrap, for å bruke det kan vi laste ned Bootstrap fra den offisielle siden eller bruke følgende lenke:
Vi kan også se ikonene etter kategorier på Glyphicons -siden.
La oss deretter se et eksempel på at vi bruker dette biblioteket for ikoner for knapper og dataoppføringselementer for et skjema:
Glyphicon Bootstrap - KnapperVi testet på en mobil enhet slik den ville se ut:Glyphicon Bootstrap - Knapper
Søk Skriv ut Logg inn Kjøp
Vi bruker listeikonet til et utvalg
Biler Motorsykler
Fordelene med å bruke skriftikon eller skriftikon er at det sparer å måtte påkalle et bilde eller et ikon siden bildene er i svg -format i css -filen i biblioteket og disse bildene er skalerbare.
Et komplett bibliotek kan være mellom 10Kb og 40Kb, noe som øker lasthastigheten til nettstedet.
Ikonene er tekst, derfor kan vi manipulere dem med CSS, og det vil svare på enhver hendelse vi programmerer med Jquery.
Hvis vi angir en skriftstørrelse i egenskapen CSS Font em for eksempel skriftstørrelse: 4em ikonet reagerer og vil tilpasse seg hvilken som helst enhet. De kan også brukes til å programmere responsive applikasjoner med rammer som sett i opplæringen, programmering av mobile applikasjoner med Ionic Framework, disse ikonene brukes også.
Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
