mathsjery
JF-Expert Member
- Sep 26, 2015
- 2,249
- 1,813
Kwa wale mnaoendelea kutumia picha kuwa kama icons inatosha sasa, kwa wale wanaotumia icon fonts mjitahidi kufanya ntakayoeleza!.
Hakika inasumbumbua na italeta shida kwenye project yako, endapo utaendelea kutumia picha halisi kuwa kama icons, wengi hutumia picha kwa kuwa walikosa icons kadhaa wanazopenda ziwepo kwenye project zao iwe ni mobile or web app project, hata hivyo sio vizuri kutumia picha kwa kuwa zinapunguza perfomance na hazileti mwonekano mzuri mfano una web app inafanana na blog kwakuwa ulitumia picha hatakama utatumia the same color bado haitapendeza ukifananisha na normal icon fonts.
Usumbufu mwingine unaoweza jitokeza unapotumia picha badala ya icon fonts ni kuresize kila picha iwe sawa na nyingine, ukitumia CSS itabuma sana, ukitumia photoshop utatakiwa uresize vizuri hili picha ziwe na size sawa. Chukulia una picha saba na unataka uzifanye icon utafanya nini? muda plus usumbufu unakuwa mwingi.
Naam ziko njia nyingi za namna ya kupata icon murua kwa ajili ya project kama hizo, njia ambazo ni popular ni kama vile:
kutumia icon font libraries, i.e font awesome, ionicons, material design icons, mfg labs e.t.c.
Bahati mbaya kwa hizi pia, unapotaka kuziresize ili ziwe sawa hapo ndo utakubali mziki wa bibi zitakuwa tofauti japo kuwa umeziambia ziwe na size sawa mfano 17*17pt, my God this will scale them but one of them itakuwa imevutika mno au imesinyaaa mfano jaribu kuresize facebook icon ndani ya circle na twitter ndani ya circle fanya comparison utaona tofauti.
Solution:
Tumia svg language kutengeza default icon zako mwenyewe zitunze zitakusaidia, utaweka size sawa kwa kila svg bila usumbufu kwa kuwa hizi ni scalable vector image na unaweza badili default color, size etc. mbali na picha halisi au icon fonts japokuwa nazo ni svg but they are hard to customize.
Sio lazima utumie svg language kama unaweza kuchora kwa adobe illustrator unaweza chora icon zako na kusave kama svg kisha ziweke kwenye project yako.
Haya haujui kuchora kwa kutumia illustrator go to flatcon.com or even freepik choose social icons packs with .Ai or EPS format basi unaweza edit hapa ukishindwa wewe mzembe.
try:
Hakika inasumbumbua na italeta shida kwenye project yako, endapo utaendelea kutumia picha halisi kuwa kama icons, wengi hutumia picha kwa kuwa walikosa icons kadhaa wanazopenda ziwepo kwenye project zao iwe ni mobile or web app project, hata hivyo sio vizuri kutumia picha kwa kuwa zinapunguza perfomance na hazileti mwonekano mzuri mfano una web app inafanana na blog kwakuwa ulitumia picha hatakama utatumia the same color bado haitapendeza ukifananisha na normal icon fonts.
Usumbufu mwingine unaoweza jitokeza unapotumia picha badala ya icon fonts ni kuresize kila picha iwe sawa na nyingine, ukitumia CSS itabuma sana, ukitumia photoshop utatakiwa uresize vizuri hili picha ziwe na size sawa. Chukulia una picha saba na unataka uzifanye icon utafanya nini? muda plus usumbufu unakuwa mwingi.
Naam ziko njia nyingi za namna ya kupata icon murua kwa ajili ya project kama hizo, njia ambazo ni popular ni kama vile:
kutumia icon font libraries, i.e font awesome, ionicons, material design icons, mfg labs e.t.c.
Bahati mbaya kwa hizi pia, unapotaka kuziresize ili ziwe sawa hapo ndo utakubali mziki wa bibi zitakuwa tofauti japo kuwa umeziambia ziwe na size sawa mfano 17*17pt, my God this will scale them but one of them itakuwa imevutika mno au imesinyaaa mfano jaribu kuresize facebook icon ndani ya circle na twitter ndani ya circle fanya comparison utaona tofauti.
Solution:
Tumia svg language kutengeza default icon zako mwenyewe zitunze zitakusaidia, utaweka size sawa kwa kila svg bila usumbufu kwa kuwa hizi ni scalable vector image na unaweza badili default color, size etc. mbali na picha halisi au icon fonts japokuwa nazo ni svg but they are hard to customize.
Sio lazima utumie svg language kama unaweza kuchora kwa adobe illustrator unaweza chora icon zako na kusave kama svg kisha ziweke kwenye project yako.
Haya haujui kuchora kwa kutumia illustrator go to flatcon.com or even freepik choose social icons packs with .Ai or EPS format basi unaweza edit hapa ukishindwa wewe mzembe.
try:
Code:
<!--social icons linkedin-->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548z"></path></svg>
<!--social icons instagram-->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84s.376-.84.84-.84.84.376.84.84c0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333 1.045-2.333 2.333-2.333 2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886s.008-2.139.042-2.886c.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886s-.008 2.14-.042 2.886z"></path></svg>
<!--social icons twitter-->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"></path></svg>
<!--social icons facebook-->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971z"></path></svg>