• Ga naar hoofdnavigatie
  • Ga naar hoofdinhoud
  • Direct naar footer
TechLila-logo

TechLila

Bloedende rand, altijd

  • Home
  • Blogs
    • Android
    • computer
    • Internet
    • iPhone
    • Linux
    • Technologie
    • Windows
  • Over ons
  • Contact
  • Aanbiedingen en aanbiedingen
Techlila-logo
FacebookTweetLinkedInpinAandelen59
HTML5-gamingengines
Volgende

Maak je eigen HTML5-game met HTML5 Development Engines

Lettertype Geweldig Iconisch Lettertype Exa

TechLila Webontwerp en ontwikkeling

Pictogramlettertypen: voor- en nadelen van het lettertype Awesome

Avatar van Rajesh Namase Rajesh Namasé
Laatst geupdate op: 14 maart 2023

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:

Lettertype Geweldige voorbeelden van iconische lettertypen

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

Nieuw Icons-lettertype Geweldig iconisch lettertype

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/

Disclosure: Inhoud die op TechLila wordt gepubliceerd, wordt door lezers ondersteund. We kunnen een commissie ontvangen voor aankopen die via onze gelieerde links zijn gedaan, zonder dat het jou iets extra's kost. Lees onze Disclaimerpagina om meer te weten te komen over onze financiering, ons redactioneel beleid en manieren om ons te steunen.

Sharing is Caring

FacebookTweetLinkedInpinAandelen59
Avatar van Rajesh Namase

Rajesh Namasé

Rajesh Namasé is een professionele blogger en oprichter van TechLila blog. Daarnaast is hij een gepassioneerd ondernemer, internetmarketeer en fitnessfreak.

Categorie

  • Webontwerp en ontwikkeling

Tags

Font Awesome

Reader Interacties

wat mensen zeggen

  1. 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.

    Antwoorden
    • Rajesh Namasé

      Bedankt Vivek voor het delen van deze WordPress-plug-in met onze lezers.

      Antwoorden
    • 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.

      Antwoorden
      • Rajesh Namasé

        Probeer ook de Font Awesome WordPress-plug-in :)

        Antwoorden
  2. 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!!

    Antwoorden
  3. Vipin

    Bedankt zowel Vivek als Rajesh, beiden hebben de informatie verstrekt waarnaar ik op zoek was.

    Antwoorden
  4. Rohit Chougale

    hallo Rajesh

    'vertel me over kunnen we video in php online afspelen, zo ja, vertel me dan hoe ..

    Antwoorden
    • Rajesh Namasé

      Je kunt proberen HTML 5 videotags te gebruiken :) En het is gemakkelijk om HTML 5 te gebruiken met PHP :)

      Antwoorden
  5. vaibhav

    Ik voeg deze plug-in zeker toe aan mijn wordpress acc..
    bedankt beheerder..!

    Antwoorden
  6. 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.

    Antwoorden
  7. Lelie

    Is er een plug-in voor dit spul? Wauw geweldig, ik hoor het voor het eerst. Bedankt om dit te delen.

    Antwoorden
  8. Mohsin Ali

    Zeer interessante plug-in Rajesh waar heb je deze unieke ideeën vandaan.

    Antwoorden
  9. 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.

    Antwoorden
  10. 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.

    Antwoorden
    • Rajesh Namasé

      Oké, we hebben de titel van het artikel bijgewerkt, bedankt.

      Antwoorden
  11. 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.

    Antwoorden
  12. 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.

    Antwoorden
  13. vikas

    Leuke post, Font Awesome is een van de beste ontwikkelingen in de designwereld.

    Antwoorden
  14. Mark Fox

    Bedankt voor het delen. Ik ben nu meer geneigd om het te gebruiken.

    Antwoorden
  15. Gaurav Dutt

    Man! 2013, hoe kon ik dit niet eerder hebben gezien, maar het werkte nog steeds perfect voor mij. Bedankt hiervoor.

    Antwoorden

Voeg uw commentaar toe Annuleren antwoord

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Footer Logo Voettekst Logo

footer

Over ons

Hallo en welkom bij TechLila, de beroemde technologieblog waar je vindingrijke artikelen kunt vinden om de basis onder de knie te krijgen en meer.

Bij TechLila is ons belangrijkste doel om unieke informatie te bieden, zoals kwaliteitstips en -trucs, tutorials, handleidingen voor Windows, Macintosh, Linux, Android, iPhone, beveiliging en een aantal diverse subonderwerpen zoals recensies.

Links

  • Over ons
  • Contact
  • Disclaimer
  • Privacybeleid
  • Algemene Voorwaarden

Volg

Aangepast thema met Genesis Framework

Cloudhosting door Cloudways

Taal

© Copyright 2012–2023 TechLila. Alle rechten voorbehouden.