Pictogramlettertypen zijn geweldig voor uw site: hier is waarom

Advertentie

Je hebt gehoord van pictogrammen en je hebt vrijwel zeker gehoord van lettertypen, maar wat een is Pictogram lettertype? Vandaag laat ik je zien wat pictogramlettertypen zijn en hoe je ze kunt gebruiken om je website op te vrolijken. Laten we beginnen.

Wat zijn pictogramlettertypen?

Pictogramlettertypen zijn exact hetzelfde als 'gewone' lettertypen - ze bepalen het uiterlijk van een stuk tekst. Het grote verschil is dat pictogramlettertypen geen letters en cijfers bevatten, maar symbolen en pictogrammen. Je kunt hierdoor in de war raken, want wat heb je aan een lettertype als je geen brieven aan je moeder kunt schrijven!

Pictogramlettertypen worden voornamelijk gebruikt om websites te stijlen. Omdat ze op vectoren zijn gebaseerd, kunnen ze worden aangepast, verplaatst, gestileerd en gewijzigd met behulp van CSS 5 babystappen om CSS te leren en een kick-ass CSS-tovenaar te wordenCSS is de belangrijkste verandering die webpagina's in het afgelopen decennium hebben gezien en het effende de weg voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ...

Lees verder . Dit biedt een enorm voordeel ten opzichte van traditionele ontwerpmethoden zoals afbeeldingen. Het uiterlijk van een groot aantal pictogrammen kan met slechts een paar regels code worden gewijzigd. U hoeft geen afbeeldingen te bewerken, Photoshop te openen of de nieuwe bestanden te uploaden - u schrijft gewoon code.

Ermee beginnen

Ik zal gebruiken Lettertype Awesome voor deze voorbeelden, maar de theorie kan op veel andere lettertypepakketten worden toegepast.

Hier is de start-HTML:

Dit is de minimale hoeveelheid HTML die nodig is om een ​​webpagina te maken. Ik zal het grootste deel ervan niet uitleggen, want we hebben dat behandeld in onze gids over hoe een website te maken.

De belangrijkste regel is de volgende:

Dit laadt het Font Awesome-stylesheet uit de CDN. Zonder deze regel zou uw website niet weten wat Font Awesome is, dus het is vrij belangrijk. Deze stylesheet verwerkt al het harde werk van het insluiten van weblettertypen en maakt het over het algemeen veel eenvoudiger voor u.

Font Awesome-pictogrammen worden gedefinieerd door CSS-klassen toegevoegd aan ik -tags. Deze zijn gekozen omdat er geen browser of standaard gedefinieerde stijl aan is gekoppeld, zodat uw pictogrammen niet allemaal in de war raken. Als alternatief kunt u de klassen toevoegen aan span tags, maar dat maakt uw HTML wel rommelig.

Hier is het basisgebruik. Doe dit in je lichaam tags:

 Mijn eerste pictogram

Dit is hoe het eruit ziet:

Hoe gemakkelijk was dat? Laten we het afbreken. Er zijn twee klassen nodig om Font Awesome te laten werken. De eerste wordt genoemd fa, wat staat voor Font Awesome. Dit is nodig voor elk pictogram, ongeacht welk pictogram u gebruikt. De tweede klasse geeft het specifieke pictogram aan dat u wilt gebruiken - dit kan van alles zijn, een vliegtuig, een persoon of een creditcard. Dit wordt ook voorafgegaan door fa, en omdat dit een tandwielpictogram is, is de naam fa-radertje. U kunt een lijst bekijken met alle pictogrammen in Font Awesome op hun website.

Probeer het pictogram van het tandwiel in een ander te veranderen.

Dieper gaan

Zodra je de basis kent, is het tijd voor een aantal geavanceerde trucs.

Als u niet uw eigen CSS wilt schrijven, kunt u de stijlen gebruiken die rechtstreeks in Font Awesome zijn ingebouwd. Er zijn veel klassen die u kunt gebruiken om pictogrammen groter te maken:

Een andere handige klasse om te gebruiken is de fa-spin. Hierdoor gaan pictogrammen roteren, en in combinatie met de vorige grootteklassen, kun je een aantal leuke effecten produceren. Hier is de code:

Dit is het resultaat:

Het is gemakkelijk om pictogrammen te draaien - gebruik de fa draaien klasse:

Het getal aan het einde definieert de rotatiegraden voor het pictogram, maar laat u niet meeslepen. Je bent beperkt tot 90, 180of 270.

Een laatste truc die je kunt doen is stapelen. De fa-stack klasse kunt u twee of meer pictogrammen samen combineren. Hier is de code:

Dit is hoe het eruit ziet:

Zodra je al deze verschillende klassen begint te combineren, zijn de mogelijkheden echt eindeloos.

Aangepaste CSS

Omdat pictogramlettertypen zijn alleen maar lettertypen, u kunt ze stijlvol maken met CSS net zoals elk ander element. Een beetje CSS3 gebruiken kan een lange weg gaan:

Hier is de HTML voor dat pictogram:

Hier is de CSS:

@keyframes verplaatsen {van {margin-left: 0; } tot {margin-left: 400px; } } .bike {animatienaam: verplaatsen; animatieduur: 4s; }

Deze CSS is vrij eenvoudig, maar heeft een grote impact. Dit is echter geen CSS-tutorial, dus misschien wilt u dat wel leer CSS 10 eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt lerenWilt u meer weten over het gebruik van CSS? Probeer deze eenvoudige CSS-codevoorbeelden om te beginnen en pas ze vervolgens toe op uw eigen webpagina's. Lees verder als je meer wilt weten over de innerlijke werking.

Je kunt een aantal speciale dingen doen als je echt wilt:

Dit hapert een beetje om de bestandsgrootte voor het web te verkleinen. Hier is de HTML:

Hier is de CSS:

@keyframes fade {from {opacity: 0; } tot {opacity: 1; } } .person {opacity: 0; animatienaam: vervagen; } # p1 {kleur: rood; animatieduur: 2s; } # p2 {kleur: oranje; animatieduur: 4s; } # p3 {kleur: groen; animatieduur: 6s; } # p4 {animation-duration: 8s; }

Net als het vorige voorbeeld gebruikt dit CSS3-animaties. Een animatie genaamd vervagen is gemaakt en elk persoonspictogram implementeert deze animatie met verschillende timing. Er is veel potentieel om uit de bol te gaan met deze pictogrammen en CSS3.

Dat is alles voor vandaag. U zou nu Icon Fonts moeten kunnen gebruiken om uw website op te vrolijken! Als je nog niet zo zeker bent van je vaardigheden, bekijk deze dan CSS-sjabloonsites 11 CSS-sjabloonsites: begin niet vanaf nul!Er zijn duizenden gratis CSS-sjablonen online beschikbaar, die allemaal moderne ontwerptrends en technologieën omvatten. U kunt ze in hun oorspronkelijke vorm gebruiken of aanpassen om ze uw eigen te maken. Lees verder of deze YouTube-kanalen om te beginnen Wil je webdesign leren? 7 YouTube-kanalen om mee te beginnenYouTube heeft duizenden video's en kanalen voor beginners op het gebied van webontwerp. Hier kijken we naar enkele van de beste om aan de slag te gaan. Lees verder met webdesign.

Heb je vandaag iets nieuws geleerd? Wat is je favoriete pictogramlettertype? Laat het ons weten in de reacties hieronder!