Pictogramlettertypen worden gebruikt om bepaalde standaardpictogrammen in de inhoud van uw website op te nemen. De Lettertype 'Geweldig' is een goed voorbeeld dat veel voordelen biedt ten opzichte van andere pictogramlettertypen. We raden ook aan om te gebruiken Pictogram lettertypen van Freepik als een goed alternatief.
Font Awesome is oorspronkelijk ontworpen door Dave Gandy Voor gebruik met Twitter-bootstrap. Font Awesome kan worden gebruikt met WordPress met behulp van de Font Awesome Icons-plug-in ontworpen door Rachel Bakker.
Hier is een korte introductie tot dergelijke lettertypen en waar het Awesome-lettertype past in een stijl die misschien nog in de kinderschoenen staat.
Waarom pictogramlettertypen gebruiken
Wanneer u een website ontwerpt, nemen afbeeldingen veel webruimte in beslag vanwege hun bestandsgrootte. Ze moeten ook naar uw webpagina's worden opgeroepen met HTML-opmaak. Niet alleen dat, maar hun schaalbaarheid is vaak een probleem, waardoor ze hun definitie verliezen naarmate ze groter worden. Een normaal beeld wordt alleen opgelost zoals bedoeld wanneer het wordt gebruikt in de oorspronkelijk ontworpen afmetingen.
Wanneer u op zoek bent naar standaard pictogramafbeeldingen, zoals voor voertuigen, bepaalde leestekens of grafische kaartpictogrammen, kunnen pictogramlettertypen u schaalbare afbeeldingen bieden die er hetzelfde uitzien, ongeacht de grootte van het lettertype. Dit is net zoals letters en cijfers hetzelfde lijken, ongeacht of u een lettergrootte van 2 of 5 of een lettergrootte van 10 of 24 punten gebruikt.
In veel gevallen gebruiken mensen simpelweg geen afbeeldingen vanwege dit probleem, en hun artikel of online rapport lijdt eronder in detail of duidelijkheid. Door Font Awesome te gebruiken, kunnen ze basispictogrammen aan hun sites toevoegen en deze schalen tot de vereiste grootte, alleen beperkt door de afmetingen van hun documenten - en dat kunnen ze zonder de definitie te verliezen. U kunt schaalbare pictogrammen op dezelfde manier bekijken als schaalbare lettertypetekens.
Hier is een selectie van de beschikbare videospeler en sociale pictogrammen:

En ook de nieuwe pictogrammen die bij versie 3.0 worden geleverd:

Elk van deze kan in omvang worden vergroot zonder verlies aan definitie. U kunt hun kleur wijzigen en eenvoudig schaduwen toevoegen en hun transparantie wijzigen. In feite kun je er alles mee doen wat je kunt met afbeeldingen, en nog wat, zonder de nadelen van bestandsgrootte.
Dat is eigenlijk wat pictogramlettertypen kunnen doen, en in het bijzonder het Awesome-lettertype. Hier is wat informatie over hoe ze te gebruiken en er het beste van te profiteren, en ook een of twee nadelen die verband houden met pictogramfronten:
Lettertype Awesome gebruiken
Met normale Bootstrap CSS:
Font Awesome kan worden gebruikt met de standaard Bootstrap CSS door de Awesome-lettertypemap naar uw project te kopiëren en vervolgens font-awesome.min.css in het project te verwerken. U moet dan font-awesome.min.css openen en de lettertypepaden bewerken om ervoor te zorgen dat ze naar de Awesome-locatie verwijzen.
In de Head-sectie van uw HTML moet als volgt naar de locatie van font-awesome.min.css worden verwezen:
Het lettertypepad is relatief ten opzichte van uw CSS-map.
Met Bootstrap Minder:
Als je Twitter Bootstrap met LESS CSS gebruikt, kopieer dan eerst de Font Awesome-lettertypemap naar je project, en font-awesome-less naar je Bootstrap Less-map. Vervolgens:
- a) Open bootstrap.less en vervang @import "sprites.less"; met @import "font-awesome.less";
- b) Open de font-awesome.less van uw project en bewerk de @FontAwesomePath-variabele zodat deze naar uw fontdirectory verwijst.
@FontAwesomePath: "../lettertype";
Het lettertypepad is relatief ten opzichte van uw gecompileerde CSS-map.
U bent dan helemaal klaar - maar als u een statische compiler gebruikt, moet u MINDER opnieuw compileren.
Bootstrap niet gebruiken:
Als u Bootstrap niet gebruikt, kunt u na het kopiëren van het lettertypebestand naar uw projectdirectory een van de twee font-awesome-bestanden naar uw project kopiëren, het einde openen en vervolgens de locatie van het lettertype bewerken om naar de lettertypedirectory te wijzen.
Als je Internet Explorer 7 gebruikt, gebruik dan font-awesome-ie7.min.css
Lettertype Awesome gebruiken in WordPress
Er zijn twee eenvoudige manieren om pictogramlettertypen in WordPress te gebruiken, een die u hebt geüpload met de plug-in*. Je kunt ze insluiten met HTML of shortcode gebruiken. Hier zijn voorbeelden van elk:
HTML gebruiken: Waar u het lettertype wilt laten verschijnen, voegt u eenvoudig de naam van het item toe aan de klassenaam, dus: [html] [/html]
zal een zwarte cirkel toevoegen.
U kunt de grootte van de cirkel als volgt wijzigen:
U zult het waarschijnlijk gemakkelijker vinden om de lettergrootte aan uw CSS-stylesheet toe te voegen als u van plan bent vaak dezelfde pictogramgrootte te gebruiken, en het bovenstaande formaat voor uitzonderingen.
Shortcode gebruiken: Shortcode is eenvoudiger, maar werkt over het algemeen alleen voor bericht- en pagina-inhoud in het scherm van de berichteditor. Het formaat is [icon name=icon-circle] waar je de cirkel wilt hebben.
Het nadeel van pictogramlettertypen
Pictogramlettertypen lijken geweldig om te gebruiken wanneer u een specifiek pictogram aan uw blog of website moet toevoegen, en ze kunnen worden gekoppeld om specifieke functies uit te voeren. Niet alles is echter perfect en pictogramlettertypen hebben ook nadelen. Dit zijn de veelvoorkomende problemen die worden gemeld door gebruikers van pictogramlettertypen die niet van toepassing zijn op Font Awesome - daarom is het zo 'Geweldig!'
- Een daarvan is het potentiële probleem met schermlezers die het pictogram als een alfabetische letter kunnen voorlezen. Dit is geen probleem met Font Awesome vanwege de manier waarop de lettertypetekens worden opgehaald.
- Ze kunnen in slechts één kleur worden weergegeven - of in een kleurverloop met behulp van CSS3-verlopen. Is dat een echt probleem met pictogramlettertypen?
- Het kan even duren om een aangepast lettertype te maken dat aan uw behoeften voldoet. Er is echter al een grote selectie van geweldige lettertypen aangeboden door Font Awesome, en de lijst wordt voortdurend uitgebreid. Hoewel het een gratis closed source-lettertype is, worden er regelmatig goedgekeurde lettertypen toegevoegd die door gebruikers zijn ontworpen.
Lettertype Awesome Generator-samenvatting
De Font Awesome-generator is een van de beste gratis pictogramlettertypen die momenteel beschikbaar zijn. Hoewel het is ontworpen voor gebruik met Twitter Bootstrap, kan het worden aangepast voor gebruik op reguliere websites en is er ook een WordPress-plug-in beschikbaar die het beste van dit pictogramlettertype biedt. Als je pictogramlettertypen gebruikt, probeer dan de Font Awesome eens, want je zou aangenaam verrast kunnen zijn als je het eenmaal onder de knie hebt.
* De Font Awesome Icons WordPress-plug-in is beschikbaar via https://github.com/rachelbaker/
Vivek Nath.R
In mijn blog gebruik ik Wp Exclusive Icon fonts plugin http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Het voordeel is dat het meer aanpassingsopties heeft, zoals het veranderen van kleur, grootte, oriëntatie enz. en het heeft ook veel andere pictogrammen. Controleer het.
Rajesh Namasé
Bedankt Vivek voor het delen van deze WordPress-plug-in met onze lezers.
James Dreesen
Hey Vivek, bedankt voor het delen van de plug-in, ik ben op zoek naar zoiets als dit. Ik zou ook Font Awesome Icons proberen om te zien welke voor mij is. Mooi artikel Rajesh, ga zo door! Het beste voor jou.
Rajesh Namasé
Probeer ook de Font Awesome WordPress-plug-in :)
Andy
Hallo, ik was net op zoek naar zoiets, omdat ik te lui ben om al deze klassen te maken en de stijlen en afbeeldingen aan het thema toe te voegen. Bedankt!!
Vipin
Bedankt zowel Vivek als Rajesh, beiden hebben de informatie verstrekt waarnaar ik op zoek was.
Rohit Chougale
hallo Rajesh
'vertel me over kunnen we video in php online afspelen, zo ja, vertel me dan hoe ..
Rajesh Namasé
Je kunt proberen HTML 5 videotags te gebruiken :) En het is gemakkelijk om HTML 5 te gebruiken met PHP :)
vaibhav
Ik voeg deze plug-in zeker toe aan mijn wordpress acc..
bedankt beheerder..!
Anand Hittinali
Nou, ik ben niet een man van veel woorden, dus deze plug-in is echt nuttig voor mij. bedankt voor het delen van deze plug-in.
Lelie
Is er een plug-in voor dit spul? Wauw geweldig, ik hoor het voor het eerst. Bedankt om dit te delen.
Mohsin Ali
Zeer interessante plug-in Rajesh waar heb je deze unieke ideeën vandaan.
David Kroft
Hallo,
bedankt voor deze leuke blog, want dit onderwerp "Icon Fonts" is erg nieuw voor mij, dus ik kan veel nieuwe dingen en nieuwe woorden binnen je blog leren kennen.
De lettertypegenerator is echt de beste gratis pictogramlettertypen die momenteel beschikbaar zijn. dus het is erg handig.
David Johnson
Ter info, je hebt de term "Font Awesome-generator" gebruikt, maar je artikel heeft betrekking op Font Awesome zelf, niet op een generator. Het woord "generator" heeft een specifieke betekenis in de context van pictogramlettertypen. Voorbeelden van generatoren voor pictogramlettertypen die Font Awesome ondersteunen, zijn icnfnt en Fontello.
Rajesh Namasé
Oké, we hebben de titel van het artikel bijgewerkt, bedankt.
Carlton
Je hebt één belangrijk nadeel van pictogramlettertypen weggelaten: ze degraderen niet gracieus. Alle gebruikers die het downloaden van lettertypen hebben uitgeschakeld (omdat ze ofwel beveiligingsbewust zijn, vroeger beveiligingsbewust waren en vergeten zijn, of zijn geconfigureerd door iemand anders die beveiligingsbewust was en niet op de hoogte is), zien alleen lelijke lege glyph-symbolen. Om een verantwoordelijke gebruiker van icon fonts te zijn, moet je accepteren dat je die gebruikers onder een bus gooit.
Ayush Agrawal
Dit artikel lijkt een beetje oud, maar ik zou willen zeggen dat een goede manier om font awesome te gebruiken het gebruik van cdn is: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Helpt bloggers die laadtijden willen verkorten.
vikas
Leuke post, Font Awesome is een van de beste ontwikkelingen in de designwereld.
Mark Fox
Bedankt voor het delen. Ik ben nu meer geneigd om het te gebruiken.
Gaurav Dutt
Man! 2013, hoe kon ik dit niet eerder hebben gezien, maar het werkte nog steeds perfect voor mij. Bedankt hiervoor.