Font Awesome: The Complete Library Guide

Gratis ikoner Font Awesome: Vad det är och vad det används för. Så här ansluter du ikoner till webbplatsen. Fördelar och nackdelar med biblioteket.

Font Awesome Icon Set: Den ultimata guiden

Font Awesome är en uppsättning teckensnitt och ikoner baserade på CSS och mindre. Verktyget gör att du snabbt kan ansluta alla typer av ikoner till webbplatsen, vilket förbättrar dess design och användbarhet avsevärt. Det är nog att infoga några rader av kod.

Font Awesome ger dig skalbara vektorikoner som du enkelt kan anpassa storlek, färg, skuggor och allt annat som kan göras med CSS.

Font Awesome Library har en enorm samling av de bästa förslagen för dig. Du förbättrar ditt projekt med unika ikoner. I själva verket är detta en enorm uppsättning av alla typer av ikoner som du kan använda för dina egna ändamål.

I fontawesome är alla ikoner absolut och helt gratis. Biblioteket är licensierat enligt GNU General Public License. Det innebär att det kan användas fritt i kommersiella projekt och i princip överallt.

Satsen skapades av Dave Gandhi. Det innehåller gratis sociala medierikoner, ikoner för att förbättra användargränssnittet och mer.

Typiskt används font fantastiska teckensnittskript i samband med bootstrap och bootstrapcdn. Font Awesome är andra endast till Google-teckensnitt i popularitet.

Hur det fungerar

Huvudfunktionen är att alla font fantastiska ikoner inte är statiska bilder. De är i teckensnittsformat. Med andra ord är dessa ikonfonter. Till exempel är en sökikon eller en social nätverkslogotyp densamma som de enkla tecknen A, B, C.

Font fantastiska ikoner är skapade med hjälp av skalbara vektorer. Därför kan de ökas till nästan vilken storlek som helst.

Alla tillgängliga ikoner ingår i en typsnitt. Allt du behöver är att ladda ner den här filen från den officiella webbplatsen och ansluta den i stilar.

Varför designers väljer font fantastiskt

Font Awesome har ett antal fördelar:

• Snabb anslutning. Du behöver bara ladda ner en speciell fil från den officiella webbplatsen och ansluta den genom att ange sökvägen till den i CSS-koden.
• Flexibilitet och skalbarhet. Ikonerna kan förstoras till vilken storlek som helst. Symbolerna kommer att vara så tydliga som enheten tillåter. I åldern av responsiv design är detta viktigt. Förresten, av samma anledning, är font fantastiska ikoner lämpliga för retina displayer.
• Stylisering. Ikoner kan enkelt ändras i färg, storlek, skugga eller andra externa parametrar. Designern får alla fördelar med styling regelbunden text. Du kan också rotera ikonerna. Till exempel, visa upp och ner eller rotera 90 grader.
• Snabb lastning av webbplatsen. Alla ikoner ingår i en typsnitt. Så det tar bara en http-förfrågan att ladda font fantastiskt. Det här är bra för webbplatsens prestanda.
• Kärlek till webbläsare. Font Awesome är ett cross-webbläsarverktyg. Du behöver inte oroa dig för webbläsarkompatibilitet med teckensnitt och ikoner. De stöds väl av dem alla. Även gamla IE8.
• Kompatibel med olika ramar. Biblioteket skapades främst för Bootstrap. Det kommer emellertid också att fungera bra med andra ramar.
• Flera format. Verktyget är tillgängligt i .EOT, .TTF, .WOFF och SVG-format. Så font Awesome hanteras på samma sätt som andra webbfonter.
• Inget javascript krävs. Font Awesome kräver inte att JavaScript körs.

Således är font fantastiskt ett effektivt och bekvämt verktyg som avsevärt sparar layouttid och påskyndar din webbplats.

Nackdelar med font Awesome

Verktyget har också nackdelar. Lyckligtvis finns det inte många av dem.

Först kan ikoner bara målas i en färg. Denna begränsning kan emellertid kringgå. Till exempel kombinerar fria ikoner med varandra. Eller använda CSS-effekter

För det andra innehåller tecknet Fantastiskt bibliotek för många ikoner och de ingår alla i en fil. Om en designer eller layoutdesigner bara behöver ansluta ett par ikoner, måste de helt ladda hela biblioteket helt. Och det här är hundratusentals extra ikoner som tar upp utrymme. Det finns emellertid en lösning här - skapa din egen församling, som endast innefattar de nödvändiga ikonerna.

Font fantastiska versioner: 5 och 6

Font Awesome 5 släpptes den 7 december 2017 och ursprungligen innehöll 1278 ikoner. Den femte versionen kommer i två paket: Gratis (Font Awesome gratis) och betald (font awesome pro). Den fria planen innehåller också ikoner från alla fjärde versioner. Ikonerna är tillgängliga under SIL Open Font-licensen 1.1, Creative Commons Attribution 4.0 och MIT.

Font Awesome 6 är en ny version som släpptes under andra halvåret 2020. Det innehåller nya ikoner och är endast tillgängliga i en betald plan.

Font Awesome 6 Alpha är också på vägen år 2021. Detta är en annan ny generation i ikonbiblioteket. Förutom de nya ikonerna, lägger version 6 Alpha också nya stilar, nya tjänster och hjälpmedel. Användare kan förbeställa.

Gratis och betalade planer: Skillnader och funktioner

Du kan ladda ner ikoner för gratis eller betald tariffplan.

Den fria planen innehåller över 1600 ikoner och 1 uppsättning. Ett kit är en samling ikoner, stilar och inställningar som gör att du snabbt kan göra ändringar utan att lägga till kod.

Betald tariff:

• Innehåller över 7800 ikoner och 20 uppsättningar.
• Ger tillgång till font awesome pro. Det betyder att ikonerna kan användas i inbyggda mobila applikationer och på din dator (till exempel i en ordtextredigerare eller när du skapar en presentation i PowerPoint).
• Gör att du kan ladda upp dina egna ikoner. Du kan använda dina egna ikoner bredvid eller i stället för de officiella typsnittet Fantastiska ikoner. Till exempel är det här hur du kan ladda upp en företagslogotyp. Du kan utföra samma åtgärder med dina egna ikoner som med de grundläggande - ändra stil, storlek, färg, etc.

Båda versionerna är eviga. Det är, de tillhandahålls en gång för alla.

Sätt att ansluta font fantastiskt

Först och främst måste du gå till den officiella hemsidan och ladda ner biblioteket. Det nedladdade arkivet måste vara uppackat och CSS och teckensnittsmapparna kopieras till din webbplatsmapp.

Därefter anges sökvägen till biblioteksfilen mellan huvudetiketterna. Till exempel:

Hur man visar font fantastiska ikoner på en webbplats. Mest populära metoder:

1. Användning av HTML

Det enklaste sättet.

Du måste gå till galleriet på den officiella hemsidan (fontawesome.com/icons?d=gallery) och välj den ikon du vill. Varje ikon har en personlig kod, till exempel:. Det är nog att kopiera och klistra in det på rätt plats i koden.

2. Via CSS

För att göra detta, använd pseudo-elementen efter eller tidigare, såväl som Unicode av den erforderliga ikonen. Du kan ta allt i samma galleri. Ett exempel på en sådan kod: F209.

Ett exempel på en stilfiling:

Div :: Efter {Display: Block; Innehåll: 'F209'; Font-familj: "Font Awesome 5 GRATIS";}

Sammanfattningsvis: alla font fantastiska ikoner

Således är font Awesome ett snabbt och bekvämt sätt att lägga till gratis ikoner på din webbplats. Alla ikoner är lätt skalbara och sakta ner på webbplatsen.