Font Awesome: The Complete Library Guide.

Font Awesome: The Complete Library Guide.


Libreng Icon Font Kahanga-hanga: Ano ito at kung ano ito ay ginagamit para sa. Paano kumonekta sa mga icon sa site. Mga Bentahe at Disadvantages ng Library.

Ano ang kahanga-hangang font at kung ano ang ginagamit nito sa site. Mga benepisyo sa library.

Font Awesome Icon Set: Ang Ultimate Guide.

Ang Font Awesome ay isang hanay ng mga font at mga icon batay sa CSS at mas mababa. Ang tool ay nagbibigay-daan sa mabilis mong ikonekta ang lahat ng mga uri ng mga icon sa site, makabuluhang pagpapabuti ng disenyo at kakayahang magamit nito. Ito ay sapat na upang magsingit ng ilang mga linya ng code.

Ang Font Galing ay nagbibigay sa iyo ng mga scalable vector icon na madali mong mai -personalize - laki, kulay, anino, at lahat ng iba pa na maaaring gawin sa CSS.

Ang kamangha -manghang library ay may malaking koleksyon ng mga pinakamahusay na mungkahi para sa iyo. Pinapabuti mo ang iyong proyekto na may natatanging mga icon. Sa katunayan, ito ay isang malaking hanay ng lahat ng mga uri ng mga icon na maaari mong gamitin para sa iyong sariling mga layunin.

Sa FontAwesome, lahat ng mga icon ay ganap at ganap na libre. Ang library ay lisensyado sa ilalim ng GNU General Public License. Nangangahulugan ito na maaari itong malayang gamitin sa mga komersyal na proyekto at, sa prinsipyo, sa lahat ng dako.

Ang set ay nilikha ni Dave Gandhi. Kabilang dito ang mga libreng social media icon, mga icon upang mapabuti ang user interface, at higit pa.

Kadalasan, ang mga script ng font ng font ay ginagamit kasabay ng Bootstrap at Bootstrapcdn. Ang Kahanga-hangang Font ay pangalawa lamang sa mga font ng Google sa katanyagan.

Paano ito gumagana

Ang pangunahing tampok ay ang lahat ng mga kahanga-hangang mga icon ng font ay hindi static na mga imahe. Ang mga ito ay nasa format ng font. Sa ibang salita, ang mga ito ay mga font ng icon. Halimbawa, ang isang icon ng paghahanap o isang logo ng social network ay kapareho ng simpleng mga character na A, B, C.

Ang mga kahanga-hangang icon ng Font ay nilikha gamit ang scalable vectors. Samakatuwid, maaari silang tumaas sa halos anumang sukat.

Ang lahat ng magagamit na mga icon ay kasama sa isang file ng font. Ang kailangan mo lang ay i-download ang file na ito mula sa opisyal na site at ikonekta ito sa mga estilo.

Bakit pinipili ng mga designer ang Font Awesome.

Ang Font Awesome ay may maraming pakinabang:

  • Mabilis na koneksyon. Kailangan mo lamang mag-download ng isang espesyal na file mula sa opisyal na website at ikonekta ito sa pamamagitan ng pagtukoy sa landas dito sa CSS code.
  • Flexibility at scalability. Ang mga icon ay maaaring pinalaki sa anumang laki. Ang mga simbolo ay magiging malinaw habang pinapayagan ng aparato. Sa edad na tumutugon disenyo, ito ay mahalaga. Sa pamamagitan ng paraan, para sa parehong dahilan, ang mga kahanga-hangang mga icon ng font ay angkop para sa mga display retina.
  • Stylization. Ang mga icon ay madaling mabago sa kulay, sukat, anino o anumang iba pang mga panlabas na parameter. Ang taga-disenyo ay nakakakuha ng lahat ng mga benepisyo ng regular na teksto ng estilo. Maaari mo ring i-rotate ang mga icon. Halimbawa, display upside down o paikutin 90 degrees.
  • Mabilis na paglo-load ng site. Ang lahat ng mga icon ay kasama sa isang file ng font. Kaya tumatagal lamang ito ng isang HTTP na kahilingan upang i-load ang Font Kahanga-hanga. Ito ay mahusay para sa pagganap ng website.
  • Pag-ibig ng mga browser. Ang Font Awesome ay isang cross-browser tool. Hindi mo kailangang mag-alala tungkol sa compatibility ng browser ng mga font at mga icon. Sila ay mahusay na sinusuportahan ng lahat ng mga ito. Kahit na lumang IE8.
  • Mga katugmang may iba't ibang mga balangkas. Ang library ay nilikha lalo na para sa Bootstrap. Gayunpaman, ito ay mahusay na gumagana sa iba pang mga frameworks pati na rin.
  • Ilang mga format. Ang tool ay magagamit sa .Eot, .ttf, .woff at SVG format. Kaya ang Font Kahanga-hanga ay hinahawakan sa parehong paraan tulad ng iba pang mga web font.
  • Walang kinakailangang JavaScript. Ang kahanga-hangang Font ay hindi nangangailangan ng JavaScript na tumakbo.

Kaya, ang Font Awesome ay isang epektibo at maginhawang tool na makabuluhang nagse-save ng oras ng layout at pinapabilis ang iyong website.

Mga disadvantages ng font awesome.

Ang tool ay mayroon ding mga disadvantages. Sa kabutihang palad, hindi marami sa kanila.

Una, ang mga icon ay maaari lamang ipinta sa isang kulay. Gayunpaman, ang limitasyon na ito ay maaaring iwaksi. Halimbawa, pinagsasama ang mga libreng icon sa bawat isa. O paggamit ng mga epekto ng CSS.

Pangalawa, ang Font Awesome Library ay naglalaman ng napakaraming mga icon at lahat sila ay kasama sa isang file. Kung kailangan lamang ng designer o layout designer na kumonekta sa ilang mga icon, kailangan pa rin nilang i-load ang buong library. At ang mga ito ay daan-daang libo ng mga dagdag na icon na kukuha ng espasyo. Gayunpaman, mayroong isang solusyon dito - ang paglikha ng iyong sariling pagpupulong, na isasama lamang ang mga kinakailangang icon.

Font Awesome Versions: 5 at 6.

Ang Font Awesome 5 ay inilabas noong Disyembre 7, 2017 at orihinal na naglalaman ng 1278 na mga icon. Ang ikalimang bersyon ay may dalawang pakete: Libre (Font Awesome Free) at Bayad (Font Awesome Pro). Naglalaman din ang libreng plano ng mga icon mula sa lahat ng ikaapat na bersyon. Ang mga icon ay magagamit sa ilalim ng Sil Open Font License 1.1, Creative Commons Attribution 4.0, at MIT.

Sil Open Font License (OFL-1.1) | Open Source Initiative.
Creative Commons - Attribution 4.0 International - CC sa pamamagitan ng 4.0
Ang lisensya ng MIT | Open Source Initiative.

Font Awesome 6 ay isang bagong bersyon na inilabas sa ikalawang kalahati ng 2020. Kabilang dito ang mga bagong icon at magagamit lamang sa isang bayad na plano.

Font Kahanga-hanga 6 Alpha ay din sa paraan sa 2021. Ito ay isa pang bagong henerasyon ng icon library. Bilang karagdagan sa mga bagong icon, nagdadagdag din ang Bersyon 6 Alpha ng mga bagong estilo, mga bagong serbisyo, at mga assistive tool. Ang mga gumagamit ay maaaring pre-order.

Libre at Bayad na Mga Plano: Mga Pagkakaiba at Tampok

Maaari kang mag-download ng mga icon para sa libreng o bayad na plano ng taripa.

Kasama sa libreng plano ang higit sa 1600 mga icon at 1 set. Ang isang kit ay isang koleksyon ng mga icon, estilo, at mga setting na nagbibigay-daan sa mabilis mong gumawa ng mga pagbabago nang walang pagdaragdag ng code.

Bayad na taripa:

  • Kabilang ang higit sa 7800 mga icon at 20 set.
  • Nagbibigay ng access sa Font Awesome Pro. Nangangahulugan ito na ang mga icon ay maaaring gamitin sa mga katutubong mobile na application at sa iyong computer (halimbawa, sa isang editor ng teksto ng salita o kapag lumilikha ng isang pagtatanghal sa PowerPoint).
  • Pinapayagan kang mag-upload ng iyong sariling mga icon. Maaari mong gamitin ang iyong sariling mga icon sa tabi o sa lugar ng opisyal na mga kahanga-hangang mga icon ng font. Halimbawa, ito ay kung paano ka makakapag-upload ng logo ng kumpanya. Maaari mong isagawa ang parehong mga pagkilos sa iyong sariling mga icon tulad ng mga pangunahing - baguhin ang estilo, laki, kulay, atbp.

Ang parehong mga bersyon ay walang katapusan. Iyon ay, sila ay ibinigay minsan at para sa lahat.

Mga paraan upang ikonekta ang Font Awesome.

Una sa lahat, kailangan mong pumunta sa opisyal na website at i-download ang library. Dapat na i-unpack ang na-download na archive at kinopya ng mga folder ng CSS at Font sa folder ng iyong site.

Pagkatapos nito, ang path sa library file ay tinukoy sa pagitan ng mga tag ng ulo. Halimbawa:

Paano upang ipakita ang mga kahanga-hangang mga icon ng font sa isang website. Pinakatanyag na mga pamamaraan:

1.USE HTML.

Ang pinakamadaling paraan.

Kailangan mong pumunta sa gallery sa opisyal na website (fontawesome.com/icons?d=Gallery) at piliin ang icon na gusto mo. Ang bawat icon ay may personal na code, halimbawa:. Ito ay sapat na upang kopyahin at i-paste ito sa tamang lugar sa code.

2. Sa pamamagitan ng CSS.

Upang gawin ito, gamitin ang mga pseudo-elemento pagkatapos o bago, pati na rin ang Unicode ng kinakailangang icon. Maaari mong dalhin ang lahat ng ito sa parehong gallery. Isang halimbawa ng naturang code: F209.

Isang halimbawa ng entry ng estilo ng file:

div :: pagkatapos {display: block; Nilalaman: 'F209'; Font-Family: 'Font Awesome 5 Free';}

Sa konklusyon: lahat ng mga kahanga-hangang icon ng font

Kaya, ang Font Awesome ay isang mabilis at maginhawang paraan upang magdagdag ng mga libreng icon sa iyong website. Ang lahat ng mga icon ay madaling maayos at hindi pabagalin ang site.




(0)