Fontti Awesome: Täydellinen kirjaston opas

Ilmaiset kuvakkeet Font Awesome: Mikä se on ja mitä sitä käytetään. Kuinka liittää kuvakkeet sivustoon. Kirjaston edut ja haitat.

FONT AWESOME ICON SET: Ultimate Guide

Font Awesome on joukko fontteja ja kuvakkeita, jotka perustuvat CSS: hen ja vähemmän. Työkalun avulla voit nopeasti yhdistää kaikenlaisia ​​kuvakkeita sivustoon, mikä parantaa merkittävästi suunnittelua ja käytettävyyttä. Riittää vain muutaman rivin koodin.

Font Awesome antaa sinulle skaalautuvia vektorikuvakkeita, jotka voit helposti mukauttaa - koko, väri, varjot ja kaikki muu, jotka voidaan tehdä CSS: llä.

Font Awesome Library on valtava kokoelma parhaista ehdotuksista sinulle. Parannat projektiasi ainutlaatuisilla kuvakkeilla. Itse asiassa tämä on valtava joukko kaikenlaisia ​​kuvakkeita, joita voit käyttää omiin tarkoituksiin.

Fontawesomeissa kaikki kuvakkeet ovat ehdottomasti ja täysin ilmaiseksi. Kirjasto on lisensoitu GNU: n yleisen julkisen lisenssin alla. Tämä tarkoittaa sitä, että sitä voidaan käyttää vapaasti kaupallisissa hankkeissa ja periaatteessa kaikkialla.

Set luotiin Dave Gandhi. Se sisältää ilmaisia ​​sosiaalisen median kuvakkeita, kuvakkeet parantamaan käyttöliittymää ja paljon muuta.

Tyypillisesti fontti mahtavia fontti-skriptejä käytetään bootstrap- ja bootstrapcdn: n kanssa. Fontti Awesome on toiseksi vain Google-fontteihin suosio.

Kuinka se toimii

Tärkein ominaisuus on, että kaikki fontti mahtavat kuvakkeet eivät ole staattisia kuvia. Ne ovat fonttiformaatissa. Toisin sanoen nämä ovat kuvakefontteja. Esimerkiksi hakukuvake tai sosiaalisen verkon logo on sama kuin yksinkertaiset merkit A, B, C.

Font Awesome-kuvakkeet luodaan skaalautuvilla vektoreilla. Siksi niitä voidaan lisätä lähes mihin tahansa kokoon.

Kaikki käytettävissä olevat kuvakkeet sisältyvät yhteen fonttitiedostoon. Kaikki mitä tarvitset on ladata tämä tiedosto viralliselta sivustolta ja liittää sen tyyliin.

Miksi suunnittelijat valitsevat Font Awesome

Font Awesomeilla on useita etuja:

• Nopea yhteys. Sinun tarvitsee vain ladata erityinen tiedosto virallisesta verkkosivustosta ja liittää sen määrittämällä polku CSS-koodiin.
• Joustavuus ja skaalautuvuus. Kuvakkeet voidaan suurentaa mihin tahansa kokoon. Symbolit ovat yhtä selkeitä kuin laite sallii. Vastaavan suunnittelun aikana tämä on tärkeää. Muuten samasta syystä fontti mahtavat kuvakkeet sopivat verkkokalvoihin.
• Tyylitys. Kuvakkeet voidaan helposti muuttaa värissä, koossa, varjossa tai muissa ulkoisissa parametreina. Suunnittelija saa kaikki säännöllisen tekstin mukaiset edut. Voit myös kiertää kuvakkeita. Esimerkiksi näytä ylösalaisin tai kierrä 90 astetta.
• Nopea kuormitus sivuston. Kaikki kuvakkeet sisältyvät yhteen fonttitiedostoon. Joten se vie vain yhden http-pyynnön ladata fontti mahtava. Tämä on hienoa verkkosivujen suorituskykyyn.
• Rakkaus selaimista. Fontti Awesome on risti-selaintyökalu. Sinun ei tarvitse huolehtia fonttien ja kuvakkeiden selaimen yhteensopivuudesta. Ne tukevat ne kaikki. Jopa vanha IE8.
• Yhteensopiva eri puitteiden kanssa. Kirjasto luotiin ensisijaisesti bootstrap. Se toimii kuitenkin hyvin myös muiden puitteiden kanssa.
• Useita muotoja. Työkalu on saatavilla .Eot, .ttf, .woff ja SVG-formaatteja. Joten fontti mahtava käsitellään samalla tavalla kuin muut verkkofontit.
• JavaScript ei tarvita. Fontti Awesome ei vaadi JavaScriptin toimimaan.

Siten fontti mahtava on tehokas ja kätevä työkalu, joka merkittävästi säästää ulkoasua ja nopeuttaa verkkosivustosi.

Haitat Font Awesome

Työkalulla on myös haittoja. Onneksi ei ole monia niistä.

Ensinnäkin kuvakkeet voidaan maalata vain yhdellä värillä. Tätä rajoitusta voidaan kuitenkin kiertää. Esimerkiksi vapaat kuvakkeet toisiinsa. Tai käyttämällä CSS-tehosteita

Toiseksi Font Awesome -kirjasto sisältää liian monta kuvaketta ja ne kaikki sisältyvät yhteen tiedostoon. Jos suunnittelija tai layout-suunnittelija tarvitsee vain yhdistää pari kuvaketta, niiden on vielä ladattava koko kirjasto kokonaan. Ja nämä ovat satoja tuhansia ylimääräisiä kuvakkeita, jotka vievät tilaa. Täällä on kuitenkin ratkaisu, joka luo oman kokoonpanosi, johon sisältyy vain tarvittavat kuvakkeet.

Font Awesome -versiot: 5 ja 6

Fontti Awesome 5 julkaistiin 7. joulukuuta 2017 ja alun perin sisälsi 1278 kuvaketta. Viides versio tulee kahteen pakettiin: vapaa (fontti mahtava vapaa) ja maksettu (Font Awesome Pro). Vapaa suunnitelma sisältää myös kuvakkeita kaikista neljästä versiosta. Kuvakkeet ovat saatavilla SIL Open Font Licension 1.1, Creative Commons Attribution 4.0 ja MIT.

Font Awesome 6 on uusi versio, joka julkaistiin vuoden 2020 jälkipuoliskolla. Se sisältää uusia kuvakkeita ja se on saatavilla vain maksullisessa suunnitelmassa.

Fontti Awesome 6 Alpha on myös matkalla vuonna 2021. Tämä on toinen uusi sukupolvi kuvakkeen kirjastosta. Uusien kuvakkeiden lisäksi versio 6 Alpha lisää myös uusia tyylejä, uusia palveluja ja avustavia työkaluja. Käyttäjät voivat tilata.

Vapaa ja maksetut suunnitelmat: erot ja ominaisuudet

Voit ladata kuvakkeita ilmaiseksi tai maksettava tariffisuunnitelma.

Ilmainen suunnitelma sisältää yli 1600 kuvaketta ja 1 sarja. Kit on kokoelma kuvakkeita, tyylejä ja asetuksia, joiden avulla voit nopeasti tehdä muutoksia lisäämättä koodia.

Maksettu tariffi:

• Sisältää yli 7800 kuvaketta ja 20 sarjaa.
• Tarjoaa pääsyn Font Awesome Pro. Tämä tarkoittaa, että kuvakkeita voidaan käyttää natiivien mobiilisovelluksissa ja tietokoneessa (esimerkiksi Word Text Editorissa tai esittelyssä PowerPointissa).
• Voit ladata omia kuvakkeita. Voit käyttää omia kuvakkeita virallisen fontti Awesome-kuvakkeiden sijasta. Esimerkiksi näin voit ladata yrityksen logon. Voit suorittaa samat toiminnot omilla kuvakkeillesi kuin perus-alueilla - muuttaa tyyliä, kokoa, väriä jne.

Molemmat versiot ovat ikuisia. Toisin sanoen ne tarjotaan kerran ja kaikki.

Tapoja yhdistää fontti mahtava

Ensinnäkin sinun täytyy mennä viralliselle verkkosivustolle ja ladata kirjasto. Ladattu arkisto on pakattu ja CSS- ja Fonts-kansiot kopioidaan sivuston kansioon.

Sen jälkeen kirjastotiedoston polku määritetään pään tunnisteiden välillä. Esimerkiksi:

Kuinka näyttää fontti mahtavat kuvakkeet verkkosivuilla. Suosituimmat menetelmät:

1.SING HTML

Helpoin tapa.

Sinun täytyy mennä galleriaan virallisella verkkosivustolla (fontawesome.com/icons?d=gallery) ja valitse haluamasi kuvake. Jokaisella kuvakkeella on henkilökohtainen koodi, esimerkiksi :. Se riittää kopioimaan ja liittämään se oikeaan paikkaan koodissa.

2. CSS: n kautta

Voit tehdä tämän käyttämällä pseudo-elementtejä sen jälkeen tai sen jälkeen sekä vaaditun kuvakkeen Unicode. Voit ottaa kaiken samassa galleriassa. Esimerkki tällaisesta koodista: F209.

Esimerkki tyylitiedoston merkinnästä:

Div :: {Display: Block; Sisältö: "F209"; Font-perhe: 'Font Awesome 5 Free';}

Lopuksi: Kaikki fontti mahtavat kuvakkeet

Siten fontti mahtava on nopea ja kätevä tapa lisätä ilmaisia ​​kuvakkeita sivustoosi. Kaikki kuvakkeet ovat helposti skaalautuvia ja eivät hidasta sivustoa.