Webbutvecklare är mycket vana vid att använda ikoner för att representera en specifik åtgärd eller så kan ikonen grafiskt representera alla kommandon eller åtgärder eller en indikator på en webbsida. Ikoner används i dokument såväl som i applikationer och kan vara antingen valbara eller icke-valbara.
Till exempel är bilderna som vi ser på knapparna i en applikation alla ikoner och dessa knappar kan väljas.
För att underlätta design och programmering av webbplatser har några bibliotek för typsnittsikoner utvecklats, det vill säga ikoner som kan infogas som om de vore text och finns tillgängliga för att användas på HTML -sidor på en webbplats, vilket sparar mycket arbete för användare. designers och programmerare.
I den här självstudien kommer vi att titta på några bibliotek som Font Awesome, Bootstrap Glyphicons och Material Design Google som är bibliotek med förinställda ikonsnitt som ofta används av webbutvecklare.
Font Awesome -verktyg och bibliotek
Font Awesome är ett teckensnittsbibliotek som gör ikoner med en uppsättning CSS-baserade verktyg. Detta verktyg är utvecklat för användning med Twitter Bootstrap men kan användas individuellt som formatmallar på vilken webbplats som helst.
Fördelen med att vara ett CSS -bibliotek är att det fungerar på alla webbläsare och enheter och till och med anpassar sig till vilken skärmupplösning som helst.
Du kan ladda ner biblioteket från Font Awesome -webbplatsen. Ett annat alternativ är att använda direktlänken till biblioteket:
Låt oss se ett exempel på hur man implementerar ikoner för sociala nätverk med Font Awesome, skapar vi en html -fil och lägger till följande kod:
Fantastiskt teckensnitt - Ikoner för sociala medier
Varje ikon representeras av en klass fa-ikon så till exempel kommer ikonen för YouTube att vara fa-youtuberesultatet vid visning i webbläsaren blir följande:
Sedan kan vi lägga till våra egna CSS -klasser eller ändra den fördefinierade för att anpassa till vår design, till exempel mellan huvudetiketterna lägger vi till följande CSS -kod.
Ikondekoration via CSS
Nästa kör vi i webbläsaren och resultatet blir följande:
Vi kan se att vi har applicerat CSS på varje ikon och vi har inte lagt till några bilder. Ett annat alternativ för att förbättra synligheten är att ändra sväva klass, det vill säga när musen svävar över en ikon, ändra bokstavens färg.
För att göra detta ändrar vi färgen på följande rad:
.social-icons .fa: sväva {färg: grön; } Resultatet när du håller muspekaren över en ikon blir följande:
Vi kan också göra det med bakgrunden till varje ikon, ändra bakgrundsegenskapen för en färg som vi gillar.
Alla tillgängliga ikoner kan ses på Font Awesome -webbplatsen, ikonerna är organiserade efter kategorier.
Genom att använda denna typ av ikonsnitt för våra webbdesigner kan vi påskynda laddningen av sidan eftersom vi inte behöver bilder och erbjuder en högre kvalitet (särskilt på mobila enheter när du zoomar)
Glyphicons Bootstrap -verktyg och bibliotek
Glyphicons Bootstrap är ett teckensnittsbibliotek. Det erbjuder en mängd olika ikoner i teckensnittsformat. Dessa ikoner är gratis och du kan också utöka biblioteket med betalda ikoner. Gratis ikoner kan användas i webbdesignbaserade projekt utan att behöva köpa dem. Detta bibliotek är inriktat på ikoner för knappar som utför vissa funktioner som utskrift, sökning, spara, etc.
Detta bibliotek ingår som formatmallar i Bootstrap, för att använda det kan vi ladda ner Bootstrap från dess officiella sida eller använda följande länk:
Vi kan också se ikonerna efter kategorier på sidan Glyphicons.
Låt oss sedan se ett exempel där vi använder det här biblioteket för ikoner för knappar och datainmatningselement för ett formulär:
Glyphicon Bootstrap - KnapparVi testade på en mobil enhet som det skulle se ut:Glyphicon Bootstrap - Knappar
Sök Skriv ut Logga in Köp
Vi tillämpar listikonen på en välj
Bilar Motorcyklar
Fördelarna med att använda teckensnittsikoner eller teckensnittsikoner är att det sparar att man måste anropa en bild eller ikon eftersom bilderna är i svg -format i css -filen i biblioteket och dessa bilder är skalbara.
Ett komplett bibliotek kan vara mellan 10Kb och 40Kb, vilket ökar laddningshastigheten för webbplatsen.
Ikonerna är text därför kan vi manipulera dem med CSS och det kommer att svara på alla händelser som vi programmerar med Jquery.
Om vi anger en teckenstorlek i egenskapen CSS Font em till exempel teckenstorlek: 4em kommer ikonen att reagera och anpassa sig till alla enheter. De kan också användas för att programmera responsiva applikationer med ramar som ses i självstudien, programmera mobilapplikationer med Ionic Framework, dessa ikoner används också.
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
