Icoon lettertypen zijn geweldig voor uw site Hier is waarom

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

Wat zijn pictogramlettertypen?

Pictogramlettertypen zijn precies hetzelfde als “regelmatig” lettertypen - ze bepalen het uiterlijk van een stuk tekst. Het grote verschil hierbij is dat pictogramlettertypen geen letters en cijfers bevatten, maar symbolen en pictogrammen. Misschien raak je hier door verward, want wat heb je aan een lettertype als je geen brieven aan je moeder kunt schrijven!

Icoonlettertypen worden voornamelijk gebruikt om websites te stylen. Omdat ze gebaseerd zijn op vectoren, kunnen ze worden verkleind, verplaatst, gestyled en veranderd met behulp van CSS 5 Babystappen naar CSS leren en een Kick-Ass worden CSS Tovenaar 5 Baby Stappen om CSS te leren en een Kick-Ass te worden CSS Sorcerer CSS is de de belangrijkste webpagina's met veranderende wijzigingen in het afgelopen decennium hebben de weg geëffend voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees meer. Dit biedt een enorm voordeel ten opzichte van traditionele ontwerpmethoden, zoals afbeeldingen. Het uiterlijk van een groot aantal pictogrammen kan met slechts enkele regels worden gewijzigd. U hoeft geen afbeeldingen te bewerken, Photoshop te openen of de nieuwe bestanden te uploaden - u schrijft alleen code.

Ermee beginnen

Ik gebruik Font Awesome voor deze voorbeelden, maar de theorie kan op veel andere lettertypepakketten worden toegepast.

Dit is de starter-HTML:

Dit is de minimale hoeveelheid HTML die vereist is om een ​​webpagina te maken. Ik zal het merendeel hiervan niet uitleggen, zoals we hebben besproken in onze gids over het maken van een website.

De belangrijkste regel is de volgende:

Dit laadt de Font Awesome-stylesheet van zijn 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 over het algemeen het u veel gemakkelijker.

Font Awesome-pictogrammen worden gedefinieerd door CSS-klassen waaraan wordt toegevoegd ik -tags. Deze zijn gekozen omdat ze geen browser of standaard gedefinieerde stijl hebben, dus uw pictogrammen raken niet helemaal in de war. Je kunt ook de klassen toevoegen aan span tags, maar dat maakt je HTML rommelig.

Dit is het basisgebruik. Zet dit in je lichaam tags:

 Mijn eerste pictogram

Dit is hoe dat 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 welke u gebruikt. De tweede klasse specificeert het specifieke pictogram dat u wilt gebruiken - dit kan alles zijn, een vliegtuig, een persoon of een creditcard. Dit staat ook vooraf met fa, en aangezien dit een tandwielpictogram is, is de naam het fa-radertje. Je kunt een lijst met alle pictogrammen in Font Awesome bekijken op hun website.

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

Dieper gaan

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

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

Een andere bruikbare klasse om te gebruiken is de fa-spin. Hiermee roteer je de pictogrammen 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 bepaalt de graden van rotatie voor het pictogram, maar laat u niet meeslepen. Je bent beperkt tot 90, 180, of 270.

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

Dit is hoe dat eruit ziet:

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

Aangepaste CSS

Omdat pictogramlettertypen zijn net lettertypen, kunt u ze opmaken met CSS, net zoals elk ander element. Het gebruik van een beetje CSS3 kan een lange weg gaan:

Dit is de HTML-code voor dat pictogram:

Dit is de CSS:

@keyframes verplaatsen van margin-left: 0;  tot margin-left: 400px;  .bike animation-name: move; animatie-duur: 4s; 

Deze CSS is vrij eenvoudig, maar het heeft een grote impact. Dit is echter geen CSS-tutorial, dus misschien wil je CSS leren. De volgende stappen op weg naar een CSS Jedi Master De volgende stappen op weg naar een CSS worden Jedi Master CSS is absoluut een van de belangrijkste technologieën in de wereld op het internet van vandaag, en hoewel de meeste mensen toegeven dat ze een beetje HTML kennen, zijn we over het algemeen geen idee van CSS. De laatste keer dat ik je introduceerde ... Lees meer als je meer wilt weten over de innerlijke werking.

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

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

Dit is de CSS:

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

Net als in het vorige voorbeeld gebruikt dit CSS3-animaties. Een animatie genaamd vervagen is gemaakt en elk pictogram van een persoon implementeert deze animatie met verschillende timing. Er is veel potentieel om wild 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 dan deze CSS-sjabloonsites 11 CSS-sjabloonsites: Do not Start From Scratch! 11 CSS-sjabloonlocaties: start niet met krassen! Er zijn duizenden gratis CSS-sjablonen online beschikbaar, die allemaal moderne designtrends en -technologieën omarmen. Je kunt ze in hun originele vorm gebruiken of ze aanpassen om ze je eigen te maken. Meer lezen, of deze YouTube-kanalen om aan de slag te gaan Wilt u webontwerp leren? 7 YouTube-kanalen om aan de slag te gaan Wilt u webontwerp leren? 7 YouTube-kanalen om aan de slag te gaan YouTube heeft duizenden video's en kanalen voor beginnende webontwerpers. Hier bekijken we enkele van de beste om aan de slag te gaan. Meer lezen met webdesign.

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

Ontdek meer over: CSS, HTML, Web Design.