آموزش طراحی وب

از فونت ها بجای تصاویر در وب استفاده کنید

در این آموزش شما یادمیگیرید چطور از فونت ها بجای تصاویر در وب استفاده کنید.

articles

استفاده از fontawesome بجای آیکون ها در css

تا بحال به این موضوع فکر کردید که چطور میتونید از فونت ها بجای آیکون ها استفاده کنید تا حجم سایتتون رو کاهش و سرعت بارگزاری سایتتون رو افزایش بدید ؟

زمانی که شما آیکون های مختلف رو بصورت معمولی و یا Sprite شده در سایتتون استفاده می کنید ، مرورگر هنگام لود صفحه ی وب زمانی رو برای بارگزاری و خواندن این تصاویر در نظر میگیره که موجب میشه ، زمان لود صفحه ی وب شما بالا بره و گاهی هم به سایت شما صدمه بزنه . جدای از این موضوع ، ممکنه شما قصد داشته باشید سایت خود را بصورت رسپانسیو کدنویسی کنید ، برای اینکار مجبور هستید برای رزولوشن های پایین (موبایل و تبلت) از آیکون های کوچک تر استفاده کنید ، پس باید یک آیکون رو در چند سایز مختلف sprite کنید . خوب مشخصه این کار سخته و حجم فایل هارو هم بالا میبره .

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

حالا سوال اینه که ، از چه فونت هایی میتونیم برای این کار استفاده کنیم ؟ و چطور میتونیم در css این فونت ها رو بجای آیکون های سایت تعریف کنیم ؟

با گسترش این تکنولوژی سایت های زیادی راه اندازی شد و فونت های بسیاری در دسترس عموم قرار گرفت . یکی از سایت هایی که میتونه به شما کمک کنه سایت معروف http://fontawesome.io هست .

حالا چطور میتونیم از این سایت و امکانات خوبش استفاده کنیم ؟

پکیجی که خود سایت در اختیار شما قرار میده جزئیات زیادی داره که شما نیاز ندارید مگر اینکه با فریم ورک های css کار کنید ، پس نیازی به دانلود پکیج از طریق سایت نیست . مراحل زیر رو قدم به قدم طی می کنیم تا در نهایت یاد بگیریم چطور از این فونت ها استفاده کنیم .

مرحله اول : در ابتدا از طریق این لینک فونت AwoSome رو دانلود کنید .

مرحله دوم : پس از دانلود فونت ، فونت هارو در پوشه ای به نام fonts قرار بدید . یک پوشه ی css ایجاد کنید و فایل css تون رو در آن ایجاد کنید . از طریق کد زیر فونت AwoSome رو در ابتدای فایل css تعریف کنید .

مرحله سوم : تا اینجا شما ۸۰ درصد راه و اومدید 🙂 دیگه چیزی نمونده فقط کافیه هر کاراکتری که نیاز دارید رو از فایل cssیی که در ضمیمه در اختیارتون قرار میدم بردارید و در فایل css اصلی سایتتون قرار بدید و از اون استفاده کنید . به عنوان مثال ما سه کاراکتر توییتر ، فیس بوک و گیت هاب رو برمیداریم و در سایتمون نمایش میدیم . کد css این سه کاراکتر بصورت زیر هست :

در رابطه با کلاس کاذب before هم میتونید به بخش css مدرسه مجازی ایرانیان مراجعه کنید و مطالعه کنید. در این مقاله در همین حد میتونم توضیح بدم که از این کلاس استفاده می کنید تا بتونید کد فونت رو در content کلاس قرار بدید .

حالا به سراغ کد html میریم تا از این css ها استفاده کنیم . ما سه عنصر span برای این سه آیکون در نظر میگیریم :

در کد html کلاس مورد نظر رو به هر عنصر اختصاص میدید .

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

fontawesome

در صورتی که بخواین اندازه ی فونت و یا رنگ اون رو تغییر بدید کافیه کدهای css رو تغییر بدید . به عنوان مثال ما توییتر رو فیروزه ای و فیس بوک رو آبی می کنیم  :

screenshot2

 میتونید بصورت بالا این کار رو انجام بدید یا میتونید در کلاس اصلی تغییرات رو اعمال کنید و اگر خواستید hover هم برای آیکون ها در نظر بگیرید .

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

فقط یک توضیح حاشیه ای خدمتتون بدم . در انتهای این مقاله شما میتونید فایل css رو دانلود کنید که تمامی کدها در اون قرار داره و میتونید در پروژه هاتون استفاده کنید . اما چطور متوجه بشید که کدوم فونت چه آیکونی رو تشکیل میده . برای این کار به سایت اصلی  http://fontawesome.io برید و بر روی گزینه ی icons  در منوی بالا کلیک کنید . یک صفحه با کتابخانه ای از فونت ها برای شما به نمایش درمیاد . آیکون هارو میبینید ، نام هر کدوم که مد نظرتون بود رو کپی کنید و در فایل css جستجو کنید . با این کار میتونید کد آیکون مورد نظرتون رو پیدا کنید و در پروژتون استفاده کنید .

دوستان میتونید فایل ضمیمه رو هم دانلود کنید که هم شامل فونت ها میشه ، هم css و هم html پروژه ی کوچکی که باهم انجام دادیم .

موفق و پاینده باشید 🙂

منتشر شده در اولین نسخه ماهنامه طراحی وب (مدرسه مجازی ایرانیان)

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۶

    • سلام دوست عزیز
      بله چشم حتما یه مقاله در رابطه با این موضوع ارسال می کنم.
      فقط برای اینکه کارتون راه بیوفته خلاصه وار بهتون بگم باید فایل font-awesome.min.css رو توی head قرار بدید ، و فونت های زیر هم توی فایل css تون attach کنید :
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.tff
      fontawesome-webfont.woff
      و با استفاده از آموزشی که توی همین مقاله داده شده ، کدهای آیکون هارو پیدا کنید و به همون شکلی که تو مقاله گفته شده تو قالبتون به کار ببرید . مثلا :

      در کل آنچنان تفاوتی نداره .

  • در جواب دانیال عزیز :

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

    خسته نباشید هم میگم خدمت آقای همت یار

  • سلام
    ممنون از اموزش بسیار خوبتون…
    فقط یه سوال…موقع استفاده از این فونت ها میخواستم به این فونت ها یه بک گراند دایره ای شکل بدم ولی هر کاری کردم نشد!!!!!!
    اول از روش پدینگ استفاده کردم که دیدم تو اجزای مختلف دایره کوچک و بزرگ میشه و اندهزش با بقیه فرق میکنه!!!!
    بعد از روش width و height استفاده کردم دیدم فونت مورد نظرم میره میچسبه بالای دایره!!!!
    به نظر شما مشکل کار کجاست؟

    • سلام دوست عزیز

      شکلی که میخواین روش کار کنید بدید تا بگم چیکار کنید .

      موفق باشید

  • خیلی ناقص توضیح دادی یک دفعه پریدی وسط کار…خوب فایل css رو چطوری درست کنیم و منظورم اون صفحه ی اولی که font-face توش آوردی کجاست ما ۱۰۰ تا از این صفحه تو قالب انجمن داریم تو کدوم باید اینارو بذاریم؟به این نمیگن قدم به قدم!!!

    • سلام دوست عزیز
      اول اینکه اگر شما تا آخر مقاله ، کامل و با دقت این مقاله رو میخوندید میتونستید راحت متوجه بشید که چیکار باید بکنید مثل بقیه ی دوستان. دوم اینکه من نمیدونم انجمن شما کجاست که بتونم راهنماییتون کنم و سوم اینکه شما فایل ضمیمه که در انتهای مقاله قرار دادم رو دانلود کنید کاملا براتون جا میوفته که موضوع چیه.
      موفق باشید .

  • سلام و خست نباشید
    ممنون بابت این مطلب. من مراحلو کامل رفتم ولی مرورگرهام فقط یه مربع تو خالی رو نشون میدن

    • سلام دوست عزیز
      مشکل میتونه یا از ورژن مرورگرتون باشه یا نادرستی مسیر فراخوانی فایل ها و فونت ها .
      اگر خواستید فایل هاتون و از طریق پرسش و پاسخ ارسال کنید تا براتون بررسی کنم .
      موفق و پیروز باشید .

  • در حالت کلی ممنون بابت این اموزش
    ولی کاملا ناقص توضیح دادید
    برای تفهیم مطلب رعایت این موارد ۱۰۰% لازم است:
    ۱- دوستان پکیج رو از سایت اصلی دانلود کنید چون کلی ایکون جدید داره
    ۲- پوشه فونت رو در پروژه تون قرار بدید
    ۳- فایل font-awesome.css رو به هد صفحه اضافه کنید
    ۴- کدهای html رو به صورت class=”fa fa-twitter یا class=”fa fa-x3 fa-twitter بنویسید

    • سلام دوست عزیز
      خیلی ممنون از توجه شما جناب پوریا،
      font-awesome.css شامل کل آیکون ها میشه که شاید شما اصلا به کارتون نیاد و فقط حجم فایل بیهوده افزایش پیدا میکنه .
      من بصورت بهینه توضیح دادم . خوبه که برای کدنویسی html بصورت بهینه کار کنیم ، مثلا فونت هایی که لازم داریم رو فقط استفاده کنیم فایل های js که لازم داریم رو فقط به صفحه اضافه کنیم . اینطوری هیچ چیز بی استفاده ای تو صفحه به کار نرفته .
      و اینکه من هم نام سایت رو در مطلب ذکر کردم و هم دلیل دانلود نکردن پکیج اصلی رو توضیح دادم ، هرکسی تمایل داره میتونه از سایت اصلی استفاده کنه ، مهم آموزش نحوه ی استفاده بوده که متوجه شدن باید چکار کنن.
      این سبک کلاس دهی fa fa-x3 fa-twitter تنظیمات پیشفرض آیکون هاست مثلا fa-x3 سایز آیکون رو تعیین میکنه، تو این مقاله طراح یاد میگیره در موارد مورد نیاز خودش به آیکون استایل بده پس فقط نیاز به عنوان آیکون داره .
      موفق و پاینده باشید .

  • سلام من یه سوال داشتم. من یه قالب دارم که در اون از fontawsome استفاده شده. چطوری میتونم به جای اونها از تصاویر وکتوری استفاده کنم؟؟خواهش میکنم کمکم کنید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی