🖼 Line Awesome, FontAwesomen korvaaja vuonna 2026
Kuvakefontit ovat nopein tapa lisätä grafiikkaa projektiin ilman SVG-tiedostojen kanssa säätämistä. FontAwesomesta on tullut standardi: miljoonat sivustot lataavat sen CDN-sisältöä joka päivä.
Mutta tällä standardilla on hintansa. Ilmaisversio on rajallinen, Pro-kuvakkeet vaativat tilauksen, ja koko CSS-tiedosto painaa satoja kilotavuja. Lisäksi yksitoikkoinen solid-tyyli luo visuaalista kohinaa tiheissä käyttöliittymissä.
Line Awesome ratkaisee nämä ongelmat yhdellä koodirivillä. Se on Icons8:n ilmainen kuvakefontti, jossa on 1 380 kuvaketta ohuella viivatyylillä. Samat luokkanimet, samat koot, mutta eri tyyli ja täysin ilmainen ilman Pro-tasoja tai laskureita.
💡 Pikakatsaus:
- Ymmärrä, miten Line Awesome eroaa FontAwesomesta ja miksi sitä kannattaa harkita
- Liitä kuvakefontti projektiisi CDN:n, npmin tai paikallisen tiedoston kautta
- Korvaa FontAwesome Line Awesomeilla muokkaamatta HTML-merkintää
- Määritä kuvakekoot, värit ja animaatiot omaa asetteluasi varten
Mikä Line Awesome on ja miten se eroaa FontAwesomesta
Line Awesome on Icons8-studion kuvakefontti, joka luotiin FontAwesome 5.11.2:n suoraksi korvaajaksi. Konepellin alla: 1 380 kuvaketta ohuella viivatyylillä, piirrettynä Windows 10:n ohjeistuksen mukaisesti. Suurin tekninen etu on, että luokkanimet vastaavat FontAwesomea. Vaihdat projektissasi CSS-tiedoston, ja kaikki kuvakkeet siirtyvät uuteen tyyliin ilman HTML:n muokkaamista.
Keskeinen ero on estetiikassa. FontAwesome käyttää täytettyjä siluetteja (solid-tyyli), Line Awesome ääriviivapiirtoja. Käytännössä tämä tarkoittaa: kuvakkeet ovat helpommin luettavissa tiheissä asetteluissa, vähemmän visuaalista kohinaa navigaatiossa ja listoissa. Hallintapaneeleissa, kojelaudoissa ja asetusliittymissä lineaarinen tyyli näyttää usein puhtaammalta.
Toinen käytännön etu on optimointi suurille kooille. Icons8:n dokumentaation mukaan FontAwesome on suunniteltu 14×14px-kokoon, kun taas Line Awesome on suunniteltu 32×32px-kokoon. Skaalattaessa lineaariset kuvakkeet säilyttävät terävyytensä, kun taas solid-kuvakkeiden reunat alkavat sumentua.
Lisenssi on Icons8:n Good Boy License. Tämä tarkoittaa ilmaista käyttöä kaikissa projekteissa, myös kaupallisissa, edellyttäen että linkität Icons8:aan. Ei Pro-tasoja, ei rajoituksia katselukerroille tai domaineille. Kaikki 1 380 kuvaketta ovat heti saatavilla.
Miten Line Awesome liitetään projektiisi
Yksinkertaisin tapa on CDN. Lisää yksi rivi <head>-osioosi:
1 <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
Tämän jälkeen kuvakkeet ovat käytettävissä <i>-tagin kautta las la-* -luokilla. Esimerkiksi kamerakuvake:
1 <i class="las la-camera"></i>
Jos projektisi käyttää bundleria, asenna npmin kautta:
1 npm install line-awesome
Tuo sitten CSS sovelluksesi aloituspisteessä:
1 import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
Paikallinen versio on suositeltavampi tuotantoon: ei riippuvuutta kolmannen osapuolen CDN:stä, pienempi viive, täysi hallinta välimuistituksesta. Voit ladata arkiston GitHub-repositoriosta. Repositorio on aktiivinen, uusin versio on 1.3.0.
Miten FontAwesome korvataan Line Awesomeilla
Korvaaminen tiivistyy kolmeen vaiheeseen. Ensiksi, poista FontAwesome-CSS-tiedosto sivupohjastasi:
1 <!-- Remove --> 2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Yhdistä sitten 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">
Huomaa toinen rivi: tämä on erikoisversio, joka yhdistää fa fa-* -luokat vastaaviin las la-* -luokkiin. Kun tämä on yhdistetty, kaikki <i class="fa fa-camera"> -merkinnät muuttuvat automaattisesti lineaarisiksi kuvakkeiksi. HTML:ää ei tarvitse muuttaa.
Bootstrap-projekteissa korvaaminen on vieläkin yksinkertaisempaa. Etsi <head>-osiosta FontAwesome-yhdistämisrivi ja vaihda URL-osoite font-awesome-line-awesome-versioon. Kaikki Bootstrap-komponentit, jotka käyttävät kuvakkeita, painikkeita, navigaatiota tai lomakkeen validointia, omaksuvat uuden tyylin automaattisesti.
Line Awesome: hienosäätö ja mukauttaminen
Koolla on väliä. Line Awesome on suunniteltu suurille kuvakkeille: 32×32 pikselin tavoiteresoluutiolla viivat näyttävät täydellisiltä. Pienissä koossa jotkin kuvakkeet menettävät luettavuuttaan, ohuet viivat sulautuvat yhteen. Ratkaisu: pakota 16 pikseliä CSS:n kautta, kuten asennusopas ehdottaa:
1 .icon-sm { font-size: 16px; }
Useimmat kuvakkeet näkyvät normaalisti tällä alueella. Jos jokin tietty kuvake sumentuu, korvaa se yksinkertaisemmalla samasta sarjasta.
Suunnittelijoille: kaikki kuvakkeet ovat saatavilla Icons8-verkkosovelluksessa. Voit hakea avainsanoilla, kopioida SVG:n suoraan tai muokata viivan paksuutta ennen vientiä. Tämä on kätevää, kun 1 380 kuvakkeen sarja ei kata tiettyä tarvetta: Icons8-alustalla on yli 4 000 kuvaketta samalla Windows 10 -tyylillä.
Kuvakkeen väriä muutetaan tavallisella color-määrityksellä CSS:ssä, kuten mitä tahansa fonttia. Animointi tehdään transition- tai @keyframes-määrityksillä. Ei erityisiä rajapintoja: Line Awesome perii tavallisen tekstin käyttäytymisen, mikä yksinkertaistaa integrointia olemassa olevaan design-järjestelmään. Käytännössä tämä tarkoittaa, että frontend-kehittäjän ei tarvitse opetella uutta syntaksia: kaikki tutut CSS-ominaisuudet toimivat rajoituksetta, ja kuvakkeet omaksuvat automaattisesti ylätason lohkon värin ja koon.
Video-opas kuvakefonttien käyttöön: yhdistäminen, sijoittelu ja CSS-niksit. Esittelyssä FontAwesome, mutta kaikki tekniikat pätevät sellaisenaan Line Awesomeen.
Hyvät ja huonot puolet
Hyvät puolet:
- Täysi luokkayhteensopivuus
FontAwesome5.11.2:n kanssa, viidessä minuutissa siirtyminen ilman HTML:n muokkaamista - Kaikki 1 380 kuvaketta ovat ilmaisia, ilman Pro-rajoituksia ja katselulaskureita, vahvistettu projektin verkkosivustolla
- Lineaarinen tyyli, joka on selkeämpi kojelaudoilla ja hallintaliittymissä
- Optimoitu 32×32px-kokoon, kuvakkeet eivät sumene skaalattaessa, Icons8:n spesifikaatioiden mukaisesti
- Pääsy Icons8-verkkosovellukseen, jossa on yli 4 000 samantyylistä kuvaketta räätälöityihin tarpeisiin
Haitat:
- Projektia ei ole päivitetty merkittävästi version 1.3.0 jälkeen, GitHub-repositorio vahvistaa, ettei uusia julkaisuja ole
- Pienissä kooissa (14×14px ja alle) ohuet viivat menettävät luettavuuttaan, dokumentaatio neuvoo pakottamaan 16px
- Good Boy License vaatii Icons8-attribuution, ei MIT, linkki on pakollinen
- Markkinointisivuille ja laskeutumissivuille
FontAwesomen solid-tyyli näyttää usein sopivammalta
Mihin projekteihin Line Awesome sopii parhaiten
Line Awesome on paras valinta kolmessa skenaariossa.
Ylläpitopaneelit ja kojelaudat. Lineaarinen tyyli luo vähemmän visuaalista kohinaa, käyttöliittymä näyttää siistimmältä, eivätkä kuvakkeet vie huomiota datalta.
Uudet projektit tyhjästä. Jos et ole historiallisesti sidoksissa FontAwesomeen, ota Line Awesome. Saat täyden 1 380 kuvakkeen sarjan ilmaiseksi, ilman huolta Pro-tilauksista ja rajoituksista.
Bootstrap-projektit. Yhden rivin vaihtaminen <head>-osiossa siirtää kaikki komponentit uuteen tyyliin automaattisesti. Painikkeet, navigaatio, lomakkeiden validointi, kaikki päivittyvät ilman mallipohjien muokkaamista.
Mutta milloin et tarvitse Line Awesomea. Jos projektisi käyttää jo FontAwesome Solidia ja olet tyytyväinen tyyliin, siirtymisessä ei ole juuri järkeä. Se toimii, älä koske siihen. Laskeutumissivuille, joissa on tiheää grafiikkaa, FontAwesomen solid-kuvakkeet näyttävät painavammilta ja tutummilta.
⁉️🤔 Usein kysytyt kysymykset
Mikä on Line Awesomen lisenssi, voiko sitä käyttää kaupallisissa projekteissa?
Line Awesomea jaetaan Icons8:n Good Boy License -lisenssillä. Tämä tarkoittaa vapaata käyttöä kaikissa projekteissa, mukaan lukien kaupalliset ja suljetut projektit. Katselukertojen, verkkotunnusten tai projektien määrälle ei ole rajoituksia. Ainoa vaatimus on säilyttää linkki Icons8:aan käyttöliittymässä tai lähdekoodissa. Toisin kuin MIT-lisenssissä, maininta on pakollinen, mutta maksua ei tarvita.
Kuinka paljon Line Awesome on FontAwesomea raskaampi?
Täysi Line Awesome -paketti painaa noin 120 kt minifoituna CSS:nä, mikä on verrattavissa
FontAwesomeFree -versioon. Mutta koska käytät vain osaa ikoneista, todellinen vaikutus lataukseen on minimaalinen. jsDelivr CDN palvelee tiedostot Cloudflaren kautta gzip/brotli-pakkauksella, jolloin lopullinen koko on noin 25-35 kt.
Tuetaanko vanhoja selaimia?
Ikonifontteja tukevat kaikki selaimet IE 8:sta alkaen. Line Awesome ei ole poikkeus: WOFF2-muoto toimii Chromessa, Firefoxissa, Safarissa ja Edgessä. IE 11 käyttää varalla WOFF-muotoa, joka sisältyy jakeluun.
Mitä tehdä, jos tarvittavaa ikonia ei ole kokoelmassa?
Ensimmäinen askel: etsi Icons8-alustalta samalla Windows 10 -tyylillä. Siellä on yli 4 000 ikonia, joista monet ovat saatavilla ilmaiseksi SVG-muodossa. Toinen askel: ota Line Awesomesta merkitykseltään lähin ikoni ja muokkaa sitä CSS:n avulla: kierto, peilaus, päällekkäisyys. Kolmas askel: käytä mukautettua SVG:tä ikonifontin rinnalla, ne toimivat normaalisti yhdessä samassa projektissa.
Päivitetäänkö Line Awesomea vuonna 2026?
GitHubin repositorio on aktiivinen, mutta merkittäviä uusia versioita ei ole tullut version 1.3.0 jälkeen. 1 380 ikonin kokoelma kattaa verkkokehittäjien keskeiset tarpeet, mutta uusia ikonikategorioita ei lisätä. Icons8 kehittää maksullista API:a laajennetun kokoelman käyttöön, mutta se on eri markkinarako. Tiettyihin ikoneihin auttaa Icons8-alusta SVG-viennillä.
Tarvitseeko HTML:ää muokata FontAwesomesta siirryttäessä?
Ei, se on Line Awesomen koko idea. Otat käyttöön erityisen
font-awesome-line-awesome.min.css-koontiversion, ja kaikkifa fa-*-luokat yhdistetään automaattisestilas la-*-luokkiin. Kaikki<i class="fa fa-camera">-elementtejä sisältävä HTML säilyy koskemattomana, ja ikoneista tulee viivapiirroksia.
Kumpaa käyttää: Line Awesome vai FontAwesome vuonna 2026
Jos aloitat uuden projektin, ota Line Awesome. Saat ilmaiseksi täyden ikonikokoelman, modernin viivapiirrostyylin ja luokkayhteensopivuuden, joka helpottaa tulevaa siirtymää. Ei Pro-tasoja, ei rajoituksia.
Jos projektisi on jo FontAwesomessa ja täytetty tyyli sopii sinulle, pysy siinä. Siirtyminen siirtymisen vuoksi ei ole ajan arvoista. Mutta kun uudelleensuunnittelu tai siirtyminen uuteen merkintään on suunnitteilla, kokeile Line Awesomea testialustalla. Vaihda yksi CSS-rivi ja käy käyttöliittymä läpi. Näet eron minuutissa.
Kokeile Line Awesomea heti: projektin dokumentaatio liitäntäesimerkkeineen ja Icons8-verkkosovellus ikonien etsimiseen tehtävääsi varten.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.