ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، ابتدا باید وارد حساب کاربری خود شوید.

فونت آیکون و نحوه استفاده از آن در طراحی سایت

سلام

اگر طراح سایت باشید حتما میدانید که یکی از مهم ترین ویژگی های سایت لود سریع صفحات سایت است، و این لود سریع صفحات سایت با استفاده از تصاویر بیشتر و بیشتر می شود، در اینجاست که فونت آیکون ها به کمک ما می آیند تا علاوه بر اینکه زیبایی سایت خود را از دست ندیم، سرعت بارگزای سایت را افزایش دهیم، در ادامه همراه بپرسم باشید تا یک تعریف کلی از فونت آیکون ها داشته باشیم.

font-icon

فونت آیکون

  • فونت آیکون چیست؟

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

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

فواید بسیاری در استفاده از فونت آیکون ها هست، که در ادامه به برخی از آنها اشاره میکنیم:

  1. پشتیبانی در تمام مرورگرها
  2. سرعت بارگزاری بسیار بالا
  3. استایل دهی به فونت آیکون ها توسط Css
  4. عدم افت کیفیت فونت آیکون ها در بزرگنمایی صفحات
  5. و ….
  • سایت های ارائه دهنده فونت آیکون

در دنیای وب؛ سایت های بسیاری وجود دارند که فونت آیکون رایگان ارائه میدهند که ما میتوانیم از آنها استفاده کنیم، در ادامه به معرفی برترین ها می پردازیم:

  1. Font Awesome: برای ورود به سایت کلیک کنید.
  2. OpenIconic : برای ورود به سایت کلیک کنید.
  3. IcoFont: برای ورود به سایت کلیک کنید.

با ورود به سایت مربوطه، آموزش استفاده از فونت آیکن قرار دارد، با این حال آموزش استفاده از فونت آیکون های سایت Font Awesome را در ادامه آموزش میدهیم.

  • آموزش استفاده از فونت آیکون های سایت Font Awesome

برای این کار می توانید به سایت Font Awesome مراجعه کنید و با ورود به بخش Download فایل های مربوطه را دانلود کنید.

در ادامه به آموزش استفاده از فونت آیکون بدون دانلود فایل های فونت آیکون می پردازیم.

  • ابتدا در تگ heaed سایت، کد زیر را قرار دهید.
حتما بخوانید:  آموزش دانلود بازی از سایت های بازی آنلاین

  • سپس به این صفحه مراجعه کنید و هر آیکونی که میخواید در صفحه وب قرار دهید را انتخاب کنید.
  • بعد از اینکه روی آیکون مورد نظر کلیک کردید، وارد صفحه کد فونت آیکن میشوید، کد فونت آیکون چیزی شبیه به کد زیر است:

همین کد بالا را برداشته و در بین کدهای HTML هر کجا که میخواهید نمایش داده شود قرار دهید.

مثال:

این نمونه مثال ساده ای از نحوه ی استفاده از فونت آیکون ها می باشد.

در آموزش های بعدی، آموزش کامل و حرفه ای استفاده از فونت آیکون ها را در سایت قرار میدهیم.

این آموزش نیز به پایان رسید …

موفق باشید.


درباره SOLTANE GHALBHAمدیر

امیدوارم از سایت رضایت کافی را داشته باشید :)

دنبال کردن من

نظر شما چیست؟