Webontwikkelaars zijn erg gewend om pictogrammen te gebruiken om een specifieke actie weer te geven, of het pictogram kan elke opdracht of actie of een indicator op een webpagina grafisch weergeven. Pictogrammen worden zowel in documenten als in toepassingen gebruikt en kunnen selecteerbaar of niet-selecteerbaar zijn.
De afbeeldingen die we bijvoorbeeld op de knoppen van een applicatie zien, zijn allemaal pictogrammen en deze knoppen kunnen worden geselecteerd.
Om het ontwerpen en programmeren van websites te vergemakkelijken, zijn enkele lettertypepictogrambibliotheken ontwikkeld, dat wil zeggen pictogrammen die kunnen worden ingevoegd alsof ze tekst zijn en beschikbaar zijn voor gebruik in de HTML-pagina's van een website, wat veel werk bespaart voor gebruikers, ontwerpers en programmeurs.
In deze tutorial zullen we kijken naar enkele bibliotheken zoals Font Awesome, Bootstrap Glyphicons en Material Design Google, dit zijn bibliotheken met vooraf ingestelde pictogramlettertypen die vaak worden gebruikt door webontwikkelaars.
Font Awesome Tools en Bibliotheek
Font Awesome is een lettertypebibliotheek die pictogrammen weergeeft met behulp van een reeks op CSS gebaseerde tools. Deze tool is ontwikkeld voor gebruik met Twitter Bootstrap, maar kan afzonderlijk worden gebruikt als stylesheets op elke website.
Het voordeel van een CSS-bibliotheek is dat deze op elke browser en elk apparaat werkt en zich zelfs aanpast aan elke schermresolutie.
U kunt de bibliotheek downloaden van de Font Awesome-website. Een andere optie is om de directe link naar de bibliotheek te gebruiken:
Laten we een voorbeeld bekijken van hoe pictogrammen voor sociale netwerken te implementeren met Font Awesome, we maken een html-bestand en voegen de volgende code toe:
Lettertype Awesome - Pictogrammen voor sociale media
Elk pictogram wordt vertegenwoordigd door een klasse fa-pictogram, dus het pictogram voor YouTube is bijvoorbeeld fa-youtube, zal het resultaat bij weergave in de browser het volgende zijn:
Dan kunnen we onze eigen CSS-klassen toevoegen of de vooraf gedefinieerde aanpassen aan ons ontwerp, bijvoorbeeld tussen de head-tags voegen we de volgende CSS-code toe.
Pictogramdecoratie via CSS
Vervolgens voeren we het uit in de browser en het resultaat is het volgende:
We kunnen zien dat we CSS op elk pictogram hebben toegepast en dat we geen afbeeldingen hebben toegevoegd. Een andere optie om de zichtbaarheid te verbeteren, is door de hover klasse, dat wil zeggen, wanneer de muis over een pictogram zweeft, verander de kleur van de letter.
Om dit te doen, veranderen we de kleur in de volgende regel:
.social-icons .fa: hover {kleur: groen; } Het resultaat als u met de muis over een pictogram gaat, is het volgende:
We kunnen het ook doen met de achtergrond van elk pictogram, door de achtergrondeigenschap te wijzigen in een kleur die we leuk vinden.
Alle beschikbare pictogrammen zijn te zien op de Font Awesome-website, de pictogrammen zijn geordend in categorieën.
Door dit type pictogramlettertype voor onze webontwerpen te gebruiken, kunnen we het laden van de pagina versnellen, omdat we geen afbeeldingen nodig hebben en een hogere kwaliteit bieden (vooral op mobiele apparaten bij het zoomen)
Glyphicons Bootstrap-hulpmiddelen en bibliotheek
Glyphicons Bootstrap is een bibliotheek met lettertypepictogrammen. Het biedt een breed scala aan pictogrammen in lettertype-indeling. Deze iconen zijn gratis en je kunt de bibliotheek ook uitbreiden met betaalde iconen. Gratis pictogrammen kunnen worden gebruikt in op webdesign gebaseerde projecten zonder ze te hoeven kopen. Deze bibliotheek is gericht op pictogrammen voor knoppen die een bepaalde functie uitvoeren, zoals afdrukken, zoeken, opslaan, enz.
Deze bibliotheek is opgenomen als stylesheets in Bootstrap, om het te gebruiken kunnen we Bootstrap downloaden van de officiële pagina of de volgende link gebruiken:
We kunnen de pictogrammen ook per categorie bekijken op de Glyphicons-pagina.
Laten we nu een voorbeeld bekijken waarin we deze bibliotheek gebruiken voor pictogrammen voor knoppen en gegevensinvoerelementen voor een formulier:
Glyphicon Bootstrap - KnopenWe hebben getest op een mobiel apparaat zoals het eruit zou zien:Glyphicon Bootstrap - Knopen
Zoeken Afdrukken Inloggen Kopen
We passen het lijstpictogram toe op een select
Auto's Motorfietsen
Het voordeel van het gebruik van lettertypepictogrammen of lettertypepictogrammen is dat u geen afbeelding of pictogram hoeft aan te roepen, aangezien de afbeeldingen in het CSS-bestand van de bibliotheek in svg-indeling staan en deze afbeeldingen schaalbaar zijn.
Een complete bibliotheek kan tussen de 10Kb en 40Kb zijn, wat de laadsnelheid van de website verhoogt.
De pictogrammen zijn tekst, daarom kunnen we ze manipuleren met CSS en het zal reageren op elke gebeurtenis die we met JQuery programmeren.
Als we in de eigenschap CSS Font een lettergrootte aangeven in em bijvoorbeeld font-size: 4em het pictogram reageert en past zich aan elk apparaat aan. Ze kunnen ook worden gebruikt om responsieve applicaties te programmeren met frameworks zoals te zien is in de tutorial, het programmeren van mobiele applicaties met Ionic Framework, deze pictogrammen worden ook gebruikt.
Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
