• Laktawan sa pangunahing nabigasyon
  • Skip to main content
  • Laktawan sa pangunahing sidebar
  • Laktawan sa footer

TechLila

Dumudugo Gilid, Lagi

  • Tahanan
  • tungkol sa
  • Makipag-ugnay sa
  • Mga Deal at Alok
Logo ng Techlila
FacebooktiriritLinkedInaspileMga Pagbabahagi76
Mga HTML5 Gaming Engine
Susunod

Gumawa ng Iyong Sariling HTML5 na Laro gamit ang HTML5 Development Engines

Font Awesome Iconic Font Exa

TechLila Web Design and Development

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

Avatar ng Rajesh Namase Rajesh Namase
Huling na-update noong: Marso 14, 2023

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:

Mga Kahanga-hangang Iconic na Font ng Font

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

Bagong Icon Font Kahanga-hangang Iconic Font

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/

magbahagi
tiririt
magbahagi
aspile
1 Mga Pagbabahagi

Pagsisiwalat: Ang nilalamang na-publish sa TechLila ay suportado ng mambabasa. Maaari kaming makatanggap ng komisyon para sa mga pagbili na ginawa sa pamamagitan ng aming mga link na kaakibat nang walang karagdagang gastos sa iyo. Basahin ang aming Pahina ng disclaimer upang malaman ang higit pa tungkol sa aming pagpopondo, mga patakaran sa editoryal, at mga paraan upang suportahan kami.

Ang pag bigay AY PAG ALAGA

FacebooktiriritLinkedInaspileMga Pagbabahagi76
Avatar ng Rajesh Namase

Rajesh Namase

Rajesh Namase ay isang propesyonal na blogger at tagapagtatag ng TechLila blog. Isa pa, isa siyang masugid na negosyante, internet marketer, at fitness freak.

kategorya

  • Web Design and Development

Mga tag

Font Galing

reader Interactions

Kung ano ang sinasabi ng mga tao

  1. Avatar ni Vivek Nath.RVivek Nath.R

    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.

    tumugon
    • Avatar ng Rajesh NamaseRajesh Namase

      Salamat Vivek sa pagbabahagi ng WordPress plugin na ito sa aming mga mambabasa.

      tumugon
    • Avatar ni James DreesenJames Dreesen

      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.

      tumugon
      • Avatar ng Rajesh NamaseRajesh Namase

        Subukan din ang paggamit ng Font Awesome WordPress plugin :)

        tumugon
  2. Avatar ni AndyAndy

    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!!

    tumugon
  3. Avatar ng VipinVipin

    Salamat pareho Vivek at Rajesh, parehong nagbigay ng impormasyon na hinahanap ko.

    tumugon
  4. Avatar ng rohit chougalerohit chougale

    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..

    tumugon
    • Avatar ng Rajesh NamaseRajesh Namase

      Maaari mong subukang gumamit ng HTML 5 na mga video tag :) At madaling gamitin ang HTML 5 gamit ang PHP :)

      tumugon
  5. Avatar ng vaibhavvaibhav

    Maingat kong idinagdag ang plugin na ito sa aking wordpress acc..
    salamat admin..!

    tumugon
  6. Avatar ni Anand HittinaliAnand Hittinali

    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.

    tumugon
  7. Avatar ni LilyLiryo

    May isang plugin para sa bagay na ito? Wow ang ganda nung una kong narinig. Salamat sa pagbabahagi nito.

    tumugon
  8. Avatar ng Mohsin AliMohsin ali

    Napaka-interesante na plugin Rajesh kung saan mo nakuha ang mga kakaibang ideyang ito.

    tumugon
  9. Avatar ni David CroftDavid Croft

    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.

    tumugon
  10. Avatar ni David JohnsonDavid Johnson

    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.

    tumugon
    • Avatar ng Rajesh NamaseRajesh Namase

      Okay, na-update namin ang pamagat ng artikulo, salamat.

      tumugon
  11. Avatar ni CarltonCarlton

    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.

    tumugon
  12. Avatar ng Ayush AgrawalAyush Agrawal

    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.

    tumugon
  13. Avatar ng vikasvikas

    Magandang post, ang Font Awesome ay isa sa mga pinakamahusay na development sa mundo ng disenyo.

    tumugon
  14. Avatar ni Mark FoxMark Fox

    Salamat sa pagbabahagi. Mas hilig kong gamitin ito ngayon.

    tumugon
  15. Avatar ng Gaurav DuttGaurav Dutt

    Lalaki! 2013, paanong hindi ko ito nakita noon ngunit gumana pa rin nang walang kamali-mali para sa akin. Salamat para dito.

    tumugon

Idagdag ang Iyong Komento Kanselahin ang sumagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *

pangunahing Sidebar

popular

Paano Pataasin ang Bilis ng Broadband sa Windows

10 Pinakamahusay na Android launcher ng 2023

Mga Dapat Gawin Pagkatapos Mag-install ng Windows 10 – Mga Tip at Trick ng Windows 10

Nangungunang 10 Mga Search Engine na Magagamit Mo upang Pribado na Maghanap sa Web

55 Mga Kawili-wiling Katotohanan sa Computer na Magpapagulo sa Iyong Isip

Ano ang Hahanapin Kapag Bumili ng Laptop – Isang Gabay sa Pagbili ng Laptop

Fusion Drive Vs SSD – Mga Bagay na Walang Sinasabi sa iyo Tungkol sa Fusion vs SSD Storage

Mga Kapaki-pakinabang na Tool

• Grammarly - Libreng Grammar Checker
• SEMrush – Ang Pinakamagandang SEO Tool na Pinagkakatiwalaan ng Mga Eksperto
• Setapp – One-stop na subscription para sa Mac at iOS

Mga Paksa sa Trending

  • Android
  • internet
  • iPhone
  • Linux
  • Kapote
  • Press Releases
  • Katiwasayan
  • Social Media
  • Teknolohiya
  • Windows

Worth Checking

10 Pinakamahusay na Sound Equalizer para sa Windows 10 (2023 Edition!)

14 Pinakamahusay na VLC Skin na Lubos na Inirerekomenda at Libre

Footer Logo Logo ng Teksto ng Footer

Pampaa

tungkol sa

Kamusta at maligayang pagdating sa TechLila, ang sikat na blog ng teknolohiya kung saan makakahanap ka ng mga mapamaraang artikulo para sa pag-master ng mga pangunahing kaalaman at higit pa.

Sa TechLila, ang aming pangunahing layunin ay magbigay ng natatanging impormasyon, tulad ng mga tip at trick sa kalidad, mga tutorial, mga gabay sa kung paano sa Windows, Macintosh, Linux, Android, iPhone, Seguridad at ilang iba't ibang mga sub-topic tulad ng mga review.

Links

  • tungkol sa
  • Makipag-ugnayan sa amin
  • Pagtanggi sa pananagutan
  • Pribadong Patakaran
  • Mga Tuntunin

sundin

Custom na Tema Gamit ang Genesis Framework

Cloud hosting ng Cloudways

wika

© Copyright 2012–2023 TechLila. All Rights Reserved.

x
x