• شاخه: طراحی    ::    بازدید: ۳۷۷۸
  • ۹

فونت‌آیکون و مزایا استفاده از آن

امروزه « فونت‌آیکون »‌ ها یکی از بهترین ابزارهایی هستند که در ساختن وبسایت‌ها و اپلیکیشن‌ها استفاده می‌کنیم. فونت‌آیکون‌ها بی‌نهایت مقیاس‌پذیر هستند، با توجه به ساختار فونت مانند، شما می‌تونید بدون از دست دادن کیفیت در هر انداژه‌ای از آنها استفاده کنید.

از مزیت‌‌های دیگه فونت‌آیکون امکان استفاده از css برای تغییر رنگ، اندازه و موارد دیگری که در css وجود داره، که باعث می‌شه آزادی عمل و خلاقیت بیشتری به وجود بیاد، که امروزه در طراحی و پیادسازی وبسایت‌ها و اپلیکشن‌ها یک مورد ضروری هست.

به نظر من مهم‌ترین مزیت استفاده از فونت‌آیکون‌ها علاوه بر موارد بالا، قابلیت بارگزاری (Load) یکباره اونها هست. قبل از ظهور این ابزار ما برای کم کردن درخواست‌های HTTP مجبور بودیم که از تصاویر مجتمع استفاده کنیم و توسط css به اصطلاح اونها رو برش بزنیم، و در صورتی که این کار نمی‌کردیم بارگزاری هر آیکون یک درخواست HTTP محسوب می‌شد و همین موضوع باعث کاهش سرعت load سایت می‌شد. اما وقتی شما از فونت‌آیکون استفاده می‌کنید فقط یک بار فونت‌آیکون خودتون را بارگزاری می‌کنید و تمام. هر لحظه که نیاز داشتید اونها رو از طریق css فراخوانی و استفاده می‌کنید.

چگونه از فونت‌آیکون‌ها استفاده کنیم :

استفاده از فونت‌آیکون‌ها خیلی خیلی آسون هست. تنها کاری که نیاز هست انجام بدید load کردن اونها و استفاده از css هست. برای مثال از کد زیر برای load فونت‌آیکون معروف FontAwesome استفاده می‌کنیم

اگر تا حالا از فونت‌آیکون استفاده نمی‌کردید، پیشنهاد می‌کنم از امروز حتما این کار انجام بدید.

در ادامه تعدادی از فونت‌آیکون جهت استفاده معرفی شده است :

FontAwesome

fontawesoek-905x500

Themify Icons

themifyicons-905x500

Foundation Icons

foundation-iconfonts-905x500

Ionicons

Octicons

Linecons

Open Iconic

openiconic-905x500

Entypo

entypo

JustVector

justvectoricons-905x500

SVG Icons

svgfonts-905x500

Payment Icons

paymentfonticons-905x500

 

 

منبع: +

پیام صادری

در حال حاضر فریلنس هستم و بیش ۱۰ سال هست که در زمینه front-end و مدیریت سرورهای لینوکس فعالیت می‌کنم. و طی این سالها تجربیاتی خوبی هم کسب کردم. یکی از طرفداران Open Source هستم و سعی می‌کنم در فعالیت‌های داوطلبانه این حوزه شرکت کنم. همیشه در حال یادگیری تکنولوزی‌های جدید هستم و از تولید پادکست و نوشتن وبلاگ لذت می‌برم.

همچنین ممکن است دوست داشته باشید ...

۹ واکنش

  1. محمد گفت:

    مطلب مفیدی بود. سایت flaticon.com هم سایتی مناسب هستش که میشه آیکون های موردنظرمون رو انتخاب کنیم و در اخر اونهارو در قالب یه فونت با فرمت های مختلف تحویل بگیریم!

  2. محمود گفت:

    مطلی مفیدی بود، ممنون
    مجموعه فونت glyph هم در کنار بوت استرپ هست که میشه ازش استفاده کرد
    از این فونتایی معرفی کردین، میشه گفت کدوم بهتره و سریعتر لود میشه؟

  3. امیرعلی گفت:

    وبسایت http://fontello.com/ هم هست که تقریبا یک کالکشن از تمام این فونت هارو داره و میتونید آیکون هایی رو که میخواید انتخاب کنید و شخصی سازی کنید مثلا 10 تا آیکون از fontawesome و 5 تا از Entypo

  4. lvlRF گفت:

    سلام دوست عزیز. ممنون از مقالتون.
    این سایت هم جالبه گفتم شاید دوست داشته باشید به بلاگتون اضافش کنید.
    https://icons8.com/

  5. مسعود گفت:

    سلام
    من هم تجربه استفاده از flaticon رو دارم و بسیار راضی کننده ست. بعید میدونم بقیه دیتابیس شون به اندازه Flaticon غنی باشه. سرچ بسیار خوبی هم داره.

  1. ۰۲-اسفند , ۱۳۹۳

    […] مطلب «فونت‌آیکون و مزایا استفاده از آن» از مزیت استفاده از فونت‌آیکون در طراحی وب صحبت شد. […]

  2. ۱۵-اسفند , ۱۳۹۳

    […] مطلب «فونت‌آیکون و مزایا استفاده از آن» از مزیت استفاده از فونت‌آیکون در طراحی وب صحبت شد. […]

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *