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

نحوه ی استفاده از سایت fontello

چگونه از فونت آیکون های fontello استفاده کنیم ؟

articles

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

چگونه از فونت آیکون های fontello استفاده کنیم ؟

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

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

fonticon

خوب بریم سر اصل مطلب ، یعنی نحوه ی استفاده از سایت fontello :

سایت http://fontello.com رو باز کنید . در اینجا مجموعه ای از آیکون ها از سایت های مختلف ارائه دهنده ی این سرویس رو مشاهده می کنید . خوب حالا طبق مراحل زیر میتونید بسته ی آیکون های دلخواهتون رو دانلود کنید :

۱-      آیکون های دلخواهتون رو با یک کلیک انتخاب کنید . زمانی که شما آیکونی رو انتخاب می کنید دور اون یه دایره قرمز رنگ ظاهر میشه .

۲-      همونطور که در تصویر مشاهده می کنید ، در تب بالا سه گزینه وجود داره :

1

  • Select Icon که تب جاری هست و شما آیکون هاتون و انتخاب می کنید .
  • Customize Names که در این تب میتونید نام آیکون هارو به دلخواه تغییر بدید .
  • Customize Codes که میتونید کدهای هر آیکون رو به نظر خودتون تغییر بدید .

۳-      اگر خواستید میتونید تغییراتی رو در مرحله ی دوم اعمال کنید ، اگر هم تغییری اعمال نکنید هیچ مشکلی به وجود نمیاد ، میریم سراغ مراحل بعدی .

۴-      همونطور که در تصویر میبینید ، در بالای صفحه و بخش انتهایی ، چند گزینه رو شما مشاهده می کنید :

2

گزینه ۱ : شما میتونید سایز آیکون هایی که میخواین دانلود کنید رو تعیین کنید .

گزینه ۲ : در اینجا شما میتونید یک پیشوند برای آیکون هاتون تعیین کنید ، مثلا با پیشوند iroschool عنوان آیکون جستجوی ما به iroschool-search تغییر پیدا می کنه .

گزینه ۳ : در اینجا میتونید نام فونت هارو مشخص کنید ، مثلا با تعیین نام rahimi فونت های دانلود شده بجای fontello میشه مثلا rahimi.eto و … .

گزینه ۴ : در مرحله ی آخر هم بهتون نشون میده چند آیکون رو انتخاب کردید ، و با کلیک روی این دکمه چند لحظه صبر می کنید و لینک دانلود رو دریافت می کنید .

من با توجه به این تنظیمات ادامه ی مبحث رو خدمتتون آموزش میدم .

در آخر شما یک بسته رو دانلود می کنید که شامل مواردی میشه که تو تصویر مشاهده می کنید :

3

صفحه ی demo.html رو که باز کنید ، آیکون هایی که انتخاب کرده بودید همراه با عنوان css یی اون هارو مشاهده می کنید . این صفحه به شما کمک می کنه که به راحتی عنوان آیکون ها رو پیدا کنید و در کدهای htmlتون بکار ببرید .

 

نحوه ی استفاده از بسته ی دانلود شده

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

سپس پوشه ی css رو باز کنید ، با توجه به تنظیماتی که انجام دادیم فایل های زیر رو در پوشه مشاهده می کنید :

4

Rahimi.css رو باز کنید تا کدهای پایه رو از این فایل کپی کنید (اگر نام فونت رو تغییر نداده باشید نام این فایل fontello.css هست) . در این فایل نحوه ی پیوست فونت هارو به فایل css آموزش داده و تنظیمات پایه ی این آیکون هارو هم قرار داده . کدهای زیر رو کپی کنید و در فایل css تون درج کنید :

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

 

سایت fontello برای ie7 هم تنظیماتی رو اعمال کرده که در فایل rahimi-ie7.css قابل مشاهده هست . این فایل رو بطور کامل کپی کنید و در پوشه ی css تون قرار بدید و با شرط زیر در قالب html تون پیوست کنید :

به آدرس دهی فایل دقت داشته باشید طبق ساختار پروژه ی خودتون آدرس دهی رو انجام بدید .

 

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

اگر موارد بالارو به درستی انجام داده باشید ، به راحتی میتونید کدهارو در html تون به کار ببرید ، فقط و فقط کافیه یه عنصر به هر آیکون اختصاص بدید که معمولا ما از <i></i> و یا <span></span> استفاده می کنیم . به عنوان مثال اگر بخواین آیکون جستجو رو در قالب html به کار ببریم از کد زیر استفاده می کنیم :

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

 

خوب تا اینجا کار ما تموم شد 🙂 برای استایل دهی به این آیکون ها هم میتونید به عنصرتون استایل بدید مثلا اگر از i استفاده کردید میتونید به عنصر i استایل بدید ، هر استایلی که به این عنصر بدید اعم از رنگ و position و … روی آیکون اعمال میشه ، فقط برای تغییر سایز این آیکون ها ، چون فونت هستند باید از font-size استفاده کنید .

 

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

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

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

حسین همت یار

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

دیدگاه ۱۳

  • خیلی ممنون.آموزش های بسیار خوبی میذارید.
    در ضمن امکانش هست آموزش کاملی درمورد ریسپانسیو کردن یک قالب وردپرس بدین؟من اموزش هایی در زمینه ی ساخت قالب وردپرس خوندم و یک قالب ساختم…حالا تو قسمت ریسپانسیو کردنش مشکل پیدا کردم.

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

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

  • درود

    آقای همت یار این فونت و دیگر فونت های گرافیکی مثل اسوم توی فایرفاکس به صورتی که دوستمون گذاشتن نمایش داده میشه ، فایرفاکس در پشتیبانیش اینو تایید کرده و باید در کد نویسی تغییراتی ایجاد بشه ، در مرورگر کروم اوکی هست اما فایرفاکس که من تست کردم مشکل داشت

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

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

      http://www.iranweblearn.com/wp-content/uploads/2014/07/htaccess.txt

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

    • سلام دوست عزیز
      ورژن فایرفاکستون چنده ؟ شاید از ورژن های قدیمی استفاده می کنید !
      با دیدن آیکون های این سایت هم مشکل دارید ؟ http://www.fontawesome.io

  • سلام
    فایرفاکس من نسخه ۳۰ هست. متوجه شدم که اشکال به خاطر عدم لود شدن فونت ها از اینترنت ایران(یا حداقل اینترنت من) هست و ظاهرا آدرس فونتها در سایت فونتلو فـــیلتر شده است.
    باتشکر

    • سلام
      برای صفحه ی اصلی هم ما favicon قرار دادیم . مشکل چیه دوست عزیز؟
      موفق باشید .

  • من استفاده کردم و مشکلی نبود فقط کافیه پوشه css و font رو در پروژتون بذارین و در بخش head کدهای html صفحتون یه لینک به فایل css اصلی مثلا hassani.css
    بدین. بعد هرجا که خواستین یه آیکن بیارین کافیه نام آیکن مورد نظر در بخش demo رو به عنوان کلاس عنصر مورد نظر مثلا
    قرار بدین.

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی