دانلود فایل ایکون ها
برای استفاده از نسخه رایگان فونت می‌توانید به وب سایت رایکن رفته و روی دکمه دانلود کلیک کنید تا فایل این فونت آیکون دانلود شود.
فایل 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>