عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2021 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

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

سلام

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

font-icon

فونت آیکون

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

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

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

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

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

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

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

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

  • آموزش استفاده از فونت آیکون های سایت Font Awesome
مطلب پیشنهادی:  معرفی ربات تلگرامی هر کانال چندتا مدیر داره؟!

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

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

  • ابتدا در تگ heaed سایت، کد زیر را قرار دهید.

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

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

مثال:

مطلب پیشنهادی:  آموزش HTML - پانزدهم(مفهوم id و class)

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

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

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

موفق باشید.

درباره احمد آخوندیمدیر سایت

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

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

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

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