Webudviklere er meget vant til at bruge ikoner til at repræsentere en bestemt handling, eller ikonet kan grafisk repræsentere enhver kommando eller handling eller en indikator på en webside. Ikoner bruges i dokumenter såvel som i applikationer og kan enten vælges eller ikke vælges.
For eksempel er de billeder, vi ser på knapperne i et program, alle ikoner, og disse knapper kan vælges.
For at lette design og programmering af websteder er nogle fontikonebiblioteker blevet udviklet, det vil sige ikoner, der kan indsættes som om de var tekst og kan bruges på HTML -siderne på et websted, hvilket sparer meget arbejde for brugere. designere og programmører.
I denne vejledning ser vi på nogle biblioteker som Font Awesome, Bootstrap Glyphicons og Material Design Google, som er biblioteker med forudindstillede ikonfonte, der ofte bruges af webudviklere.
Fantastiske skrifttyper og værktøjer og bibliotek
Font Awesome er et skrifttypebibliotek, der gengiver ikoner ved hjælp af et sæt CSS-baserede værktøjer. Dette værktøj er udviklet til brug med Twitter Bootstrap, men kan bruges individuelt som typografiark på ethvert websted.
Fordelen ved at være et CSS -bibliotek er, at det fungerer på enhver browser og enhed og endda tilpasser sig enhver skærmopløsning.
Du kan downloade biblioteket fra Font Awesome -webstedet. En anden mulighed er at bruge det direkte link til biblioteket:
Lad os se et eksempel på hvordan man implementerer ikoner til sociale netværk med Font Awesome, opretter vi en html -fil og tilføjer følgende kode:
Fantastisk skrifttype - Ikoner på sociale medier
Hvert ikon er repræsenteret af et fa-ikon i klassen, så ikonet for YouTube f.eks fa-youtube, vil resultatet ved visning i browseren være følgende:
Derefter kan vi tilføje vores egne CSS -klasser eller ændre den foruddefinerede for at tilpasse os vores design, f.eks. Tilføjer vi mellem hovedmærkerne følgende CSS -kode.
Ikondekoration via CSS
Dernæst udfører vi i browseren, og resultatet bliver følgende:
Vi kan se, at vi har anvendt CSS til hvert ikon, og vi har ikke tilføjet nogen billeder. En anden mulighed for at forbedre synligheden er at ændre svæveklasse, det vil sige, når musen svæver over et ikon, skal du ændre bogstavets farve.
For at gøre dette ændrer vi farven i følgende linje:
.social-ikoner .fa: svæve {farve: grøn; } Resultatet, når du svæver over et ikon, bliver følgende:
Vi kan også gøre det med baggrunden for hvert ikon og ændre baggrundsejendommen for en farve, vi kan lide.
Alle de tilgængelige ikoner kan ses på Font Awesome -webstedet, ikonerne er organiseret efter kategorier.
Ved at bruge denne type ikonskrifttype til vores webdesign kan vi fremskynde indlæsning af siden, da vi ikke har brug for billeder og tilbyder en højere kvalitet (især på mobile enheder ved zoom)
Glyphicons Bootstrap -værktøjer og bibliotek
Glyphicons Bootstrap er et fontikonebibliotek. Det tilbyder en lang række ikoner i skrifttypeformat. Disse ikoner er gratis, og du kan også udvide biblioteket med betalte ikoner. Gratis ikoner kan bruges i webdesign-baserede projekter uden at skulle købe dem. Dette bibliotek er orienteret efter ikoner for knapper, der udfører nogle funktioner, såsom udskrivning, søgning, gemning osv.
Dette bibliotek er inkluderet som typografiark i Bootstrap, for at bruge det kan vi downloade Bootstrap fra dets officielle side eller bruge følgende link:
Vi kan også se ikonerne efter kategorier på siden Glyphicons.
Lad os derefter se et eksempel, hvor vi bruger dette bibliotek til ikoner til knapper og dataindtastningselementer til en formular:
Glyphicon Bootstrap - KnapperVi testede på en mobilenhed, som den ville se ud:Glyphicon Bootstrap - Knapper
Søg Udskriv Login Køb
Vi anvender listeikonet til et udvalg
Biler Motorcykler
Fordelene ved at bruge skrifttype -ikoner eller skrifttype -ikoner er, at det sparer at skulle påkalde et billede eller et ikon, da billederne er i svg -format i biblioteket css -fil, og disse billeder er skalerbare.
Et komplet bibliotek kan være mellem 10Kb og 40Kb, hvilket øger indlæsningshastigheden på webstedet.
Ikonerne er tekst, derfor kan vi manipulere dem med CSS, og det vil reagere på enhver begivenhed, som vi programmerer med Jquery.
Hvis vi i egenskaben CSS Font angiver en skriftstørrelse i em f.eks. skriftstørrelse: 4em ikonet reagerer og tilpasses til enhver enhed. De kan også bruges til at programmere responsive applikationer med rammer som set i selvstudiet, programmering af mobile applikationer med Ionic Framework, disse ikoner bruges også.
Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
