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

  • دانلود فایل ایکون ها

برای استفاده از نسخه رایگان فونت می‌توانید به وبسایت رایکن رفته و روی دکمه دانلود کلیک کنید تا فایل این فونت آیکون دانلود شود. فایل zip دانلود شده را باز کرده و وارد پوشه css شوید.، فایلrighcon-all.css را کپی کرده و درون پوشه css پروژه خود paste کنید.سپس پوشه webfonts را کپی کرده و در کنار پوشه css پروژه خود paste کنید.

اگر مراحل بالا را درست انجام داده باشید در حال حاضر در فایل پروژه خود همچین ساختاریرا مشاهده می‌کنید.

  • پوشه css
    • فایل righcon-all.css
    • دیگر فایل‌های css پروژه
  • پوشه webfonts
    • فایل‌های فونت

حال باید در هر یک از صفحاتی که قصد استفاده از آیکون‌ها را در آن داریم فایل righcon-all.css را فراخوانی کنیم که اینکار با استفاده از تگ link انجام می‌شود. کافیست کد زیر را در عنصر head صفحه وب خود قرار دهید و آدرس فایل all.css را در خصیصه href تنظیم کنید.

<link href="/your-path-to-righcon/css/righcon-all.css" rel="stylesheet>
  • نمایش آیکون‌ها

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

<i class="righcon-brands ri-ap"></i>

برای انتخاب آیکون در خصیصه class می‌توان سه پیشوند به کاربرد، rib یا righcon-brands، rirs یا righcon-regular-solid و riro یا righcon-regular-outline که پیشوند rib یا righcon-brands برای ایکن هایبرند و پیشوند rirs و riro برای ایکن های regular خطی و توپر است. این نشان دهنده ایناست که رایکن دارای انواع آیکون‌های brand و regular است که تفاوت آنها را با کمی دقت در آیکون‌های مختلف این مجموعه، متوجه خواهید شد.

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

  • تغییر رنگ و سایز آیکون‌ها

برای تغییر رنگ و سایز آیکون، می‌توانید از ویژگی font-size و color استفاده کنید:

<i class="righcon-regular-solid ri-eazarBaijan" style=" font-size:40px;color:#2196F3"></i>
  • سایز های از پیش تعریف شده

فونت آیکون رایکن بصورت پیشفرض سایز‌های از پیش تعریف شده‌ای برای آیکون‌ها در نظر گرفته که برای استفاده از این سایزها کافی است از کلاس‌های ri-1x تا ri-6x استفاده کنید:

<i class="righcon-regular-solid ri-persPolice ri-1x"></i><i class="righcon-regular-solid ri-persPolice ri-6x"></i>