Mga Font ng Icon: Mga Kalamangan at Kahinaan ng Font Awesome

Ginagamit ang mga font ng icon upang isama ang ilang karaniwang mga icon sa nilalaman ng iyong website. Ang Font na 'Galing' ay isang magandang halimbawa na nag-aalok ng maraming mga pakinabang sa iba pang mga font ng icon. Iminumungkahi din namin ang paggamit Mga font ng icon mula sa Freepik bilang isang magandang alternatibo.

Ang Font Awesome ay orihinal na idinisenyo ni Dave Gandy para magamit sa Twitter Bootstrap. Ang Font Awesome ay maaaring gamitin sa WordPress gamit ang Plugin ng Font Awesome Icons dinisenyo ni Rachel Baker.

Narito ang isang maikling panimula sa naturang mga font at kung saan ang Awesome na font ay umaangkop sa isang istilo na maaaring nasa simula pa lamang.

Bakit Gumamit ng Mga Font ng Icon

Kapag nagdisenyo ka ng isang website, ang mga larawan ay kumukuha ng maraming espasyo sa web dahil sa kanilang mga laki ng file. Kailangan din silang tawagan sa iyong mga web page gamit ang HTML markup. Hindi lamang iyon, ngunit ang kanilang scaling ay madalas na isang problema, nawawalan ng kahulugan habang sila ay tumataas sa laki. Ang isang regular na larawan ay nalulutas lamang ayon sa nilalayon kapag ginamit sa orihinal nitong idinisenyong mga sukat.

Kapag naghahanap ka ng mga karaniwang larawan ng icon, gaya ng para sa mga sasakyan, ilang partikular na bantas na character o graphical charting icon, ang mga font ng icon ay maaaring mag-alok sa iyo ng mga scalable na larawan na pareho ang hitsura anuman ang laki ng font. Ito ay kung paanong ang mga letra at numero ay lumilitaw na magkapareho nang hindi isinasaalang-alang kung gumagamit ka ng laki 2 o 5 o 10 o 24 point na laki ng font.

Sa maraming mga kaso, ang mga tao ay hindi gumagamit ng mga imahe dahil sa problemang ito, at ang kanilang artikulo o online na ulat ay nagdurusa sa detalye o kalinawan dahil dito. Sa pamamagitan ng paggamit ng Font Awesome, maaari silang magdagdag ng mga pangunahing icon sa kanilang mga site at sukatin ang mga ito sa kinakailangang laki, limitado lamang sa mga sukat ng kanilang mga dokumento – at magagawa nila ito nang hindi nawawala ang kahulugan. Maaari mong tingnan ang mga scalable na icon sa parehong paraan tulad ng mga scalable na character ng font.

Narito ang isang seleksyon ng video player at mga social icon na magagamit:

At gayundin ang mga bagong icon na kasama ng bersyon 3.0:

Ang bawat isa sa mga ito ay maaaring tumaas sa laki nang walang pagkawala sa kahulugan. Maaari mong baguhin ang kanilang kulay at madaling magdagdag ng mga anino at baguhin ang kanilang transparency. Sa katunayan maaari mong gawin ang anumang bagay sa kanila na magagawa mo sa mga imahe, at pagkatapos ay ang ilan, nang walang mga disadvantages ng laki ng file.

Iyon talaga ang magagawa ng mga icon ng font, at ang Awesome na font sa partikular. Narito ang ilang impormasyon sa kung paano gamitin ang mga ito at masulit ang mga ito, at isa o dalawang disbentaha na nauugnay sa mga front ng icon:

Gamit ang Font Awesome

Gamit ang Normal Bootstrap CSS:

Maaaring gamitin ang Font Awesome kasama ang default na Bootstrap CSS sa pamamagitan ng pagkopya sa direktoryo ng Awesome ng font sa iyong proyekto, at pagkatapos ay pagkopya ng font-awesome.min.css sa proyekto. Dapat mong buksan ang font-awesome.min.css at i-edit ang mga path ng font upang matiyak na tumuturo ang mga ito sa Awesome na lokasyon.

Sa seksyong Head ng iyong HTML ang lokasyon ng font-awesome.min.css ay dapat i-reference nang ganito:

Ang path ng font ay nauugnay mula sa iyong CSS directory.

Sa Bootstrap Less:

Kung gumagamit ka ng Twitter Bootstrap na may LESS CSS, pagkatapos ay kopyahin muna ang Font Awesome font directory sa iyong proyekto, at font-wesome-less sa iyong Bootstrap Less na direktoryo. Pagkatapos:

• a) Buksan ang bootstrap.less at palitan ang @import ng "sprites.less"; na may @import "font-awesome.less";
• b) Buksan ang font-awesome.less ng iyong proyekto at i-edit ang variable na @FontAwesomePath upang tumuro sa iyong direktoryo ng font.

@FontAwesomePath: "../font";

Ang path ng font ay nauugnay mula sa iyong pinagsama-samang direktoryo ng CSS.

Handa ka na - kahit na kung gumagamit ka ng isang static na compiler dapat kang mag-recompile nang mas kaunti.

Hindi Gumagamit ng Bootstrap:

Kung hindi ka gumagamit ng Bootstrap, pagkatapos ay pagkatapos kopyahin ang font file sa iyong direktoryo ng proyekto maaari mong kopyahin ang alinman sa dalawang font-kahanga-hangang mga file sa iyong proyekto, buksan ito sa dulo pagkatapos ay i-edit ang lokasyon ng font upang tumuro sa direktoryo ng font.

Kung gumagamit ka ng Internet Explorer 7, gamitin ang font-awesome-ie7.min.css

Paano Gamitin ang Font Awesome sa WordPress

Mayroong dalawang madaling paraan upang magamit ang mga icon ng font sa WordPress isa na iyong na-upload ang plugin*. Maaari mong i-embed ang mga ito gamit ang HTML, o gumamit ng shortcode. Narito ang mga halimbawa ng bawat isa:

Gamit ang HTML: Kung saan mo gustong lumitaw ang font, idagdag lamang ang pangalan ng item sa pangalan ng klase nang ganito: [html] [/html]
ay magdagdag ng isang itim na bilog.

Maaari mong baguhin ang laki ng bilog nang ganito:

Malamang na mas madali mong idagdag ang laki ng font sa iyong CSS stylesheet kung balak mong gamitin ang parehong laki ng icon nang madalas, at ang format sa itaas para sa mga pagbubukod.

Paggamit ng Shortcode: Ang shortcode ay mas madali, ngunit sa pangkalahatan ay gagana lamang para sa nilalaman ng post at pahina sa screen ng post editor. Ang format ay [icon name=icon-circle] kung saan mo gusto ang bilog.

Ang Downside ng Icon Font

Ang mga font ng icon ay mukhang mahusay na gamitin kapag kailangan mong magdagdag ng isang partikular na icon sa iyong blog o website, at maaari silang maiugnay upang maisagawa ang mga partikular na function. Gayunpaman, hindi lahat ay perpekto, at ang mga font ng icon ay mayroon ding mga disadvantages. Ito ang mga karaniwang problema na iniuulat ng mga gumagamit ng mga font ng icon na hindi nalalapat sa Font Awesome – kaya naman ito ay 'Galing!'

1. Ang isa ay ang potensyal na problema sa mga screen reader na maaaring basahin nang malakas ang icon bilang isang alpabetikong titik. Hindi ito problema sa Font Awesome dahil sa paraan ng pagkuha ng mga character ng font.
2. Maaari silang ipakita sa isang kulay lamang – o sa isang color gradient gamit ang CSS3 gradients. Ito ba ay isang tunay na problema sa mga font ng icon?
3. Maaaring tumagal ng oras upang lumikha ng custom na font upang umangkop sa iyong mga pangangailangan. Gayunpaman, mayroon nang malaking seleksyon ng mga kahanga-hangang font na inaalok ng Font Awesome, at ang listahan ay patuloy na pinapalawak. Bagama't ito ay libreng closed source na font, ang mga aprubadong font na idinisenyo ng mga user ay regular na idinaragdag.

Buod ng Font Awesome Generator

Ang Font Awesome generator ay isa sa mga pinakamahusay na libreng icon ng font na kasalukuyang magagamit. Bagama't idinisenyo ito para gamitin sa Twitter Bootstrap, maaari itong iakma para sa paggamit sa mga regular na website at mayroon ding magagamit na WordPress plugin na nag-aalok ng pinakamahusay sa font ng icon na ito. Kung gumagamit ka ng mga font ng icon, subukan ang Font Awesome dahil baka mabigla ka kapag napag-aralan mo na ito.

* Ang Font Awesome Icons WordPress plugin ay magagamit mula sa https://github.com/rachelbaker/