Pictogramlettertypen: voor- en nadelen van het lettertype Awesome

Pictogramlettertypen worden gebruikt om bepaalde standaardpictogrammen in de inhoud van uw website op te nemen. De Lettertype 'Geweldig' is hier een bijzonder goed voorbeeld van en biedt veel voordelen ten opzichte van andere pictogramlettertypen. Oorspronkelijk ontworpen door Dave Gandy Voor gebruik met Twitter Bootstrap, Font Awesome kan worden gebruikt met WordPress door gebruik te maken van de Font Awesome Icons-plug-in ontworpen door Rachel Baker.

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!'

1. 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.
2. Ze kunnen in slechts één kleur worden weergegeven - of in een kleurverloop met behulp van CSS3-verlopen. Is dat een echt probleem met pictogramlettertypen?
3. 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/