font-awesome Handledning
Komma igång med font-awesome
Sök…
Anmärkningar
FontAwesome är en uppsättning av 600+ vektorikoner. Det är fritt tillgängligt under OFL / MIT- licens och kan användas i open source eller kommersiella projekt ..
Uppstart
Olika metoder kan användas för att integrera FontAwesome på en webbplats:
För vanlig HTML / CSS:
- Ladda ner den zip som finns tillgänglig här , packa upp och kopiera innehållet till din webbplats. Sedan referera till
/css/font-awesome.csspå webbsidanheadså här:
<link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css"> - Referera till den i webbsidan
headmed hjälp av en CDN-adress. En sådan adress skulle varahttps://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css. För att referera till detta, bara använda enlinktag men ange källan till CDN adress i stället
För pakethanterare:
De flesta paketansvariga stöder Font Awesome som ett paket, och det finns några exempel nedan:
- NuGet: Sök bara efter och installera
Font-Awesome, eller kör kommandot nedan i paketkonsolen:Install-Package FontAwesome - Ruby: Kör bara det här kommandot:
gem install font-awesome-rails - npm: kör bara det här kommandot:
npm install font-awesome
Grundexempel: med hjälp av en ikon
Det enkla användningsfallet är att hänvisa till en enda ikon i sin normala storlek: <i class="fa fa-camera-retro"></i> (Visa resultat i denna fiol.)
Skapa en tom tagg (det rekommenderas att använda <i> används för det) och tilldela klass " fa " och klassen som motsvarar önskad ikon (se listan med ikoner här ).
Med hjälp av Font Awesome
Font Awesome är ett extremt enkelt men ändå kraftfullt bibliotek att använda, med 634 ikoner tillgängliga med bara några få ord.
Hur fungerar det? Font Awesome använder Unicode-tecken lagrade i en ../fonts för att ändra alla i.fa element till respektive unicode-tecken, som sådan visar ikonen som text.
Hur skapar jag en ikon? Alla ikonklasser måste vara ett i element eller ett italic element , främst för bästa praxis, men förbättrar också prestanda med Font Awesome. Alla ikoner har också klassen fa på sig. Detta anger en ikon och fungerar inte utan den . Därefter lägger du bara till den ikon du vill ha, förinställd med en annan fa- . Ett färdigt exempel är nedan:
<i class="fa fa-pencil"></i> blir
Eftersom teckensnitt fungerar med unicode-tecken, tillåter det också att alla textmanipuleringar också kan tillämpas på det, till exempel font-size , color och mer.