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.css på webbsidan head så här:

    <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
  • Referera till den i webbsidan head med hjälp av en CDN-adress. En sådan adress skulle vara https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css . För att referera till detta, bara använda en link tag 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 fa-penna

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.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow