font-awesome Zelfstudie
Aan de slag met font-awesome

Android Angular 2 CSS HTML JavaScript jQuery React Ruby on Rails SVG twitter-bootstrap
Zoeken…


Opmerkingen

FontAwesome is een set van meer dan 600 vectorpictogrammen. Het is gratis beschikbaar onder OFL / MIT -licentie en kan worden gebruikt in open-source of commerciële projecten ..

Opstelling

Verschillende benaderingen kunnen worden gebruikt om FontAwesome in een website te integreren:

Voor gewone HTML / CSS:

  • Download de beschikbare zip hier , pak het uit en kopieer de inhoud naar uw website. /css/font-awesome.css vervolgens naar de /css/font-awesome.css in het head van de webpagina als volgt:

    <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
  • Referentie in de webpagina head met behulp van een CDN-adres. Een dergelijk adres zou https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css . Gebruik hiervoor een link maar stel in plaats daarvan de bron in op het CDN-adres

Voor pakketbeheerders:

De meeste pakketbeheerders ondersteunen Font Awesome als een pakket, en er zijn enkele voorbeelden hieronder:

  • NuGet: zoek en installeer Font-Awesome of voer de onderstaande opdracht uit in de pakketconsole: Install-Package FontAwesome
  • Ruby: Voer gewoon deze opdracht uit: gem install font-awesome-rails
  • npm: voer gewoon deze opdracht uit: npm install font-awesome

Basisvoorbeeld: een pictogram gebruiken

De eenvoudige use-case is om te verwijzen naar een enkel pictogram in zijn normale grootte: <i class="fa fa-camera-retro"></i> (Bekijk resultaat in deze viool.)

Maak een lege tag (het wordt aanbevolen om daarvoor <i> gebruiken) en wijs klasse " fa " en de klasse die overeenkomt met het gewenste pictogram toe (zie de lijst met pictogrammen hier ).

Lettertype Awesome gebruiken

Font Awesome is een uiterst eenvoudige maar krachtige bibliotheek om te gebruiken, met 634 pictogrammen beschikbaar in slechts een paar woorden.

Hoe werkt het? Font Awesome gebruikt Unicode-tekens die zijn opgeslagen in een ../fonts om alle i.fa elementen te wijzigen in het respectieve unicode-teken, zodat het pictogram als tekst wordt weergegeven.

Hoe maak ik een pictogram? Alle pictogramklassen moeten een i element of een italic element , vooral voor de beste praktijk, maar verbetert ook de prestaties met Font Awesome. Alle pictogrammen hebben ook de klasse fa erop. Dit geeft een pictogram aan en werkt niet zonder . Voeg daarna het gewenste pictogram toe, voorafgegaan door een andere fa- . Een afgewerkt voorbeeld is hieronder:

<i class="fa fa-pencil"></i> wordt fa-pencil

Omdat geweldig lettertype werkt met Unicode-tekens, is het ook mogelijk om tekstmanipulatie hierop toe te passen, zoals font-size , color en meer.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow