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!'
- 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.
- 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?
- 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/
Sa aking blog gumagamit ako ng Wp Exclusive Icon fonts plugin http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Ang kalamangan ay mayroon itong higit pang mga pagpipilian sa pagpapasadya tulad ng pagbabago ng kulay, laki, oryentasyon atbp at mayroon din itong maraming iba pang mga icon. Suriin mo ito.
Salamat Vivek sa pagbabahagi ng WordPress plugin na ito sa aming mga mambabasa.
Uy Vivek, salamat sa pagbabahagi ng plugin, naghahanap ako ng ganito. Susubukan ko rin ang Font Awesome Icons para makita kung alin ang para sa akin. Magandang artikulo Rajesh, mangyaring ipagpatuloy ito! All the best sa iyo.
Subukan din ang paggamit ng Font Awesome WordPress plugin :)
Kumusta, naghahanap lang ako ng ganito, dahil tinatamad akong likhain ang lahat ng klaseng ito at idagdag ang mga istilo at larawan sa tema. Salamat!!
Salamat pareho Vivek at Rajesh, parehong nagbigay ng impormasyon na hinahanap ko.
hi rajesh
'Sabihin mo sa akin kung maaari ba tayong mag-play ng video sa php online kung oo pagkatapos ay sabihin sa akin kung paano..
Maaari mong subukang gumamit ng HTML 5 na mga video tag :) At madaling gamitin ang HTML 5 gamit ang PHP :)
Maingat kong idinagdag ang plugin na ito sa aking wordpress acc..
salamat admin..!
well hindi ako isang tao ng maraming salita kaya ang plugin na ito ay talagang nakakatulong sa akin. salamat sa pagbabahagi ng plugin na ito.
May isang plugin para sa bagay na ito? Wow ang ganda nung una kong narinig. Salamat sa pagbabahagi nito.
Napaka-interesante na plugin Rajesh kung saan mo nakuha ang mga kakaibang ideyang ito.
Kamusta,
salamat sa magandang blog na ito, dahil ang paksang ito na "Mga Font ng Icon" ay napakabago para sa akin, kaya marami akong malalaman na mga bagong bagay at mga bagong salita sa loob ng iyong blog.
Ang Font generator ay talagang ang pinakamahusay na libreng mga font ng icon na kasalukuyang magagamit. kaya ito ay lubhang kapaki-pakinabang.
FYI, ginamit mo ang terminong "Font Awesome generator" ngunit ang iyong artikulo ay sumasaklaw sa Font Awesome mismo, hindi isang generator. Ang salitang "generator" ay may partikular na kahulugan sa konteksto ng mga font ng icon. Kasama sa mga halimbawa ng mga generator ng font ng icon na sumusuporta sa Font Awesome ang icnfnt at Fontello.
Okay, na-update namin ang pamagat ng artikulo, salamat.
Nag-iwan ka ng isang makabuluhang downside ng mga font ng icon: hindi sila bumababa nang maganda. Ang lahat ng user na hindi pinagana ang pag-download ng font (dahil sila ay may kamalayan sa seguridad, dati ay may kamalayan sa seguridad at nakalimutan, o na-configure ng ibang tao na may kamalayan sa seguridad at walang kamalayan) nakakakita lamang ng mga pangit na walang laman na simbolo ng glyph. Upang maging responsableng gumagamit ng font ng icon, dapat mong tanggapin ang pagtapon sa mga user na iyon sa ilalim ng bus.
Mukhang medyo luma na ang artikulong ito ngunit gusto kong sabihin na ang isang mahusay na paraan ng paggamit ng font awesome ay ang paggamit ng cdn nito : //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Tumutulong sa mga blogger na naghahanap upang mabawasan ang mga oras ng pagkarga.
Magandang post, ang Font Awesome ay isa sa mga pinakamahusay na development sa mundo ng disenyo.
Salamat sa pagbabahagi. Mas hilig kong gamitin ito ngayon.
Lalaki! 2013, paanong hindi ko ito nakita noon ngunit gumana pa rin nang walang kamali-mali para sa akin. Salamat para dito.