🖼 Line awesome, fontawesome'i asendus 2026. aastal
Ikoonifondid on kiireim viis graafika lisamiseks projekti, ilma et peaks SVG-failidega tegelema. FontAwesome on muutunud standardiks: miljonid saidid laadivad iga päev selle CDN-i.
Kuid sellel standardil on oma hind. Tasuta versioon on piiratud, Pro ikoonid nõuavad tellimust ja täielik CSS-fail kaalub sadu kilobaitte. Lisaks tekitab monotoonne täisstiil tihedatel liidestel visuaalset müra.
Line Awesome lahendab need probleemid ühe koodireaga. See on Icons8 tasuta ikoonifont, milles on 1380 õhukese joone stiilis ikooni. Samad klassi nimed, samad suurused, kuid erinev stiil ja täiesti tasuta, ilma Pro-astmete või loenduriteta.
💡 Kiire ülevaade:
- Mõista, mille poolest Line Awesome FontAwesome'ist erineb ja miks seda tasub kaaluda
- Ühenda ikoonifont oma projektiga CDN-i, npm-i või kohaliku faili kaudu
- Asenda FontAwesome Line Awesome'iga ilma HTML-märgendit muutmata
- Seadista ikoonide suurused, värvid ja animatsioonid vastavalt oma paigutusele
Mis Line Awesome on ja kuidas see FontAwesome'ist erineb
Line Awesome on Icons8 stuudio ikoonifont, mis on loodud FontAwesome 5.11.2 otseseks asenduseks. Kapoti all: 1380 õhukese joone stiilis ikooni, mis on joonistatud Windows 10 juhiste järgi. Peamine insenertehniline eelis on see, et klassi nimed ühtivad FontAwesome omadega. Muudad oma projektis CSS-faili ja kõik ikoonid lähevad uuele stiilile üle ilma HTML-i muutmata.
Peamine erinevus on esteetika. FontAwesome kasutab täissiluette (solid style), Line Awesome kasutab kontuurjooni. Praktikas tähendab see: ikoone on tihedatel paigutustel lihtsam lugeda, navigatsioonis ja loendites on vähem visuaalset müra. Administraatoripaneelide, armatuurlaudade ja seadete liideste jaoks näeb lineaarne stiil sageli puhtam välja.
Teine praktiline eelis on optimeerimine suurte suuruste jaoks. Icons8 dokumentatsiooni kohaselt on FontAwesome mõeldud 14×14px jaoks, samas kui Line Awesome on mõeldud 32×32px jaoks. Skaleerimisel säilitavad lineaarsed ikoonid teravuse, samas kui täisikoonid hakkavad servadest hägustuma.
Litsents on Icons8 Good Boy License. See tähendab tasuta kasutamist kõigis projektides, sealhulgas ärilistes, eeldusel, et viitate Icons8-le. Pole Pro-astmeid, piiranguid vaatamiste ega domeenide osas. Kõik 1380 ikooni on kohe saadaval.
Kuidas Line Awesome oma projektiga ühendada
Lihtsaim viis on CDN. Lisa üks rida oma <head> sektsiooni:
1 <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
Pärast seda on ikoonid saadaval <i> sildi kaudu koos las la-* klassidega. Näiteks kaamera ikoon:
1 <i class="las la-camera"></i>
Kui sinu projekt kasutab bundler'it, paigalda npm-i kaudu:
1 npm install line-awesome
Seejärel impordi CSS oma sisenemispunktis:
1 import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
Kohalik versioon on tootmiskeskkonna jaoks eelistatavam: puudub sõltuvus kolmanda osapoole CDN-ist, väiksem latentsus, täielik kontroll vahemälu üle. Arhiivi saad alla laadida GitHubi repositooriumist. Repositoorium on aktiivne, viimane versioon on 1.3.0.
Kuidas asendada FontAwesome Line Awesome'iga
Asendamine taandub kolmele sammule. Esiteks eemalda FontAwesome CSS-fail oma mallist:
1 <!-- Remove --> 2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Seejärel ühenda Line Awesome:
1 <!-- Add --> 2 <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
Pane tähele teist rida: see on spetsiaalne build, mis vastendab fa fa-* klassid vastavate las la-* klassidega. Kui see on ühendatud, muutuvad kõik <i class="fa fa-camera"> elemendid sinu märgendis automaatselt lineaarseteks ikoonideks. HTML-i pole vaja muuta.
Bootstrapi projektides on asendamine veelgi lihtsam. Otsi oma <head> sektsioonist üles FontAwesome ühendamise rida ja muuda URL font-awesome-line-awesome buildi vastu. Kõik Bootstrapi komponendid, mis kasutavad ikoone, nupud, navigatsioon, vormi valideerimine, võtavad uue stiili automaatselt üle.
Line Awesome: peenhäälestus ja kohandamine
Suurus loeb. Line Awesome on loodud suurte ikoonide jaoks: sihtresolutsioonil 32×32 px näevad jooned täiuslikud välja. Väikestel suurustel kaotavad mõned ikoonid loetavuse, õhukesed jooned sulavad kokku. Lahendus: sunni 16 px CSS-i kaudu peale, nagu seadistusjuhend soovitab:
1 .icon-sm { font-size: 16px; }
Enamik ikoone kuvatakse selles vahemikus normaalselt. Kui mõni konkreetne ikoon jääb uduseks, asenda see sama komplekti lihtsama ikooniga.
Disaineritele: kõik ikoonid on saadaval Icons8 veebirakenduses. Saad otsida märksõnade järgi, kopeerida SVG otse või muuta joone paksust enne eksportimist. See on mugav, kui 1380 ikoonist koosnev komplekt ei kata mõnda konkreetset vajadust: Icons8 platvormil on üle 4000 ikooni samas Windows 10 stiilis.
Ikooni värvi muudetakse tavalise CSS-i color atribuudiga, nagu iga fondi puhul. Animeerimine toimub transition või @keyframes abil. Spetsiaalseid API-sid pole: Line Awesome pärib tavalise teksti käitumise, mis lihtsustab integreerimist olemasolevasse disainisüsteemi. Praktikas tähendab see, et front-end arendaja ei pea uut süntaksit õppima: kõik tuttavad CSS-i atribuudid töötavad piiranguteta ja ikoonid võtavad automaatselt üle ülemploki värvi ja suuruse.
Videoõpetus ikoonifontidega töötamisest: ühendamine, positsioneerimine ja CSS-i nipid. Demonstreeritud FontAwesome põhjal, kuid kõik tehnikad kehtivad üks ühele ka Line Awesome puhul.
Plussid ja miinused
Plussid:
- Täielik klasside ühilduvus
FontAwesome5.11.2-ga, viie minuti pikkune migratsioon ilma HTML-i muutmata - Kõik 1380 ikooni on tasuta, ilma Pro piirangute ja vaatamiste loenduriteta, kinnitatud projekti veebisaidil
- Lineaarne stiil, mis on armatuurlaudadel ja haldusliidestes puhtamalt loetav
- Optimeeritud 32×32px jaoks, ikoonid ei muutu skaleerimisel uduseks, vastavalt Icons8 spetsifikatsioonidele
- Juurdepääs Icons8 veebirakendusele, kus on 4000+ samas stiilis ikooni erivajadusteks
Miinused:
- Projekti pole oluliselt uuendatud alates versioonist 1.3.0, GitHubi repositoorium kinnitab uute väljalasete puudumist
- Väikestel suurustel (14×14px ja alla selle) kaotavad õhukesed jooned loetavuse, dokumentatsioon soovitab sundida 16px
- Good Boy litsents nõuab Icons8 omistamist, mitte MIT, link on kohustuslik
- Turunduslehtede ja maandumislehtede jaoks näeb
FontAwesomesolid stiil sageli sobivam välja
Millistesse projektidesse Line Awesome kõige paremini sobib
Line Awesome võidab kolme stsenaariumi puhul.
Administraatoripaneelid ja armatuurlauad. Lineaarne stiil tekitab vähem visuaalset müra, liides näeb puhtam välja ja ikoonid ei tõmba tähelepanu andmetelt kõrvale.
Uued projektid nullist. Kui sa ei ole ajalooliselt FontAwesome-iga seotud, võta Line Awesome. Saad täieliku 1380 ikooni komplekti tasuta, muretsemata Pro tellimuste ja piirangute pärast.
Bootstrapi projektid. Ühe rea vahetamine <head> sees viib kõik komponendid automaatselt uuele stiilile. Nupud, navigatsioon, vormide valideerimine, kõik rakendub ilma malle muutmata.
Aga millal sa Line Awesome'i ei vaja. Kui sinu projekt juba kasutab FontAwesome Solid stiili ja sa oled sellega rahul, pole migreerimisel erilist mõtet. See töötab, ära puutu seda. Tiheda graafikaga maandumislehtede jaoks näevad FontAwesome solid ikoonid kaalukamad ja tuttavamad välja.
⁉️🤔 Korduma kippuvad küsimused
Millise litsentsi all Line Awesome on, kas seda võib kasutada äriprojektides?
Line Awesome on levitatud Icons8 Good Boy litsentsi alusel. See tähendab tasuta kasutamist kõigis projektides, sealhulgas ärilistes ja suletud lähtekoodiga projektides. Piiranguid vaatamiste arvule, domeenidele ega projektidele ei ole. Ainus nõue on jätta liideses või lähtekoodis alles link Icons8-le. Erinevalt MIT-st on autorile viitamine kohustuslik, kuid maksma ei pea.
Kui palju raskem on Line Awesome võrreldes FontAwesome'iga?
Täielik Line Awesome'i komplekt kaalub minifitseeritud CSS-is umbes 120 KB, mis on võrreldav
FontAwesomeFree'ga. Kuid kuna kasutate ainult osa ikoone, on tegelik mõju laadimisele minimaalne. jsDelivr CDN teenindab faile Cloudflare'i kaudu gzip/brotli pakkimisega, lõplik maht jääb 25-35 KB kanti.
Kas vanad brauserid on toetatud?
Ikoonifonte toetavad kõik brauserid alates IE 8-st. Line Awesome ei ole erand: WOFF2 formaat töötab Chrome'is, Firefoxis, Safaris ja Edge'is. IE 11 kasutab varuvariandina WOFF formaati, mis on distributsioonis kaasas.
Mida teha, kui vajalikku ikooni komplektis ei ole?
Esimene samm: otsige Icons8 platvormilt samas Windows 10 stiilis. Seal on üle 4000 ikooni, paljud neist SVG-na tasuta saadaval. Teine samm: võtke Line Awesome'ist tähenduselt lähim ikoon ja viimistlege seda CSS-i abil: pööramine, peegeldamine, ülekate. Kolmas: kasutage kohandatud SVG-d koos ikoonifondiga, need eksisteerivad ühes projektis normaalselt koos.
Kas Line Awesome'i uuendatakse 2026. aastal?
Hoidla GitHubis on aktiivne, kuid olulisi uusi versioone pole pärast 1.3.0 tulnud. 1380 ikoonist koosnev komplekt katab veebiarendaja peamised vajadused, kuid uusi ikoonikategooriaid ei lisata. Icons8 arendab tasulist API-t laiendatud kollektsioonile juurdepääsuks, kuid see on teine nišš. Spetsiifiliste ikoonide puhul aitab SVG ekspordiga Icons8 platvorm.
Kas FontAwesome'ilt üleminekul peab HTML-i muutma?
Ei, see on Line Awesome'i põhimõte. Ühendate spetsiaalse
font-awesome-line-awesome.min.cssbuildi ja kõikfa fa-*klassid vastendatakse automaatseltlas la-*klassidega. Kogu HTML koodiga<i class="fa fa-camera">jääb puutumata ja ikoonid muutuvad lineaarseks.
Mida kasutada: Line Awesome või FontAwesome 2026. aastal
Kui alustate uut projekti, võtke Line Awesome. Saate tasuta täieliku ikoonide komplekti, kaasaegse lineaarse stiili ja klasside ühilduvuse, mis lihtsustab tulevast migratsiooni. Ei mingeid Pro tasemeid, ei mingeid piiranguid.
Kui teie projekt on juba FontAwesome'il ja solid-stiil sobib, jääge selle juurde. Migreerimine migreerimise pärast ei ole aega väärt. Kuid kui on plaanis ümberkujundus või üleminek uuele märgendusele, proovige Line Awesome'i katsestendil. Asendage üks CSS-i rida ja vaadake liides üle. Näete erinevust minutiga.
Proovige Line Awesome'i kohe: projekti dokumentatsioon ühendamisnäidetega ja Icons8 veebirakendus oma ülesande jaoks ikoonide leidmiseks.
Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.