فونت اوسام FontAwesome و آیکون های کوچک

فونت اوسام FontAwesome یکی از جذاب ترین بخش های CSS و فرانت اند دولوپینگ محسوب میشود. آیکون های کوچک جذابش، امکان تغییر رنگ و تغییر سایز دارند. اینجا میخواهیم در سایتش ثبت نام کنیم. با توجه به ویدیو زیر توضیحاتی بدهیم!

گام اول: ثبت نام در سایت فونت اوسام

برای ثبت نام کافیست به سایت فونت اوسام بروید و ایمیل خود را وارد کنید تا یک kit برایتان بسازد و ایمیل کند. این kit در داشبورد اکانت شما در خود سایت fontawesome هم همیشه در دسترس و قابل کپی کردن است. البته میتوانستیم بجای ثبت نام از راه دیگری استفاده کنیم. مثلا میتوانستیم تمام ایکون ها را دانلود کنیم و در پروژه قرار دهیم.

گام دوم: کپی کردن kit

همانطور که در گام اول گفتیم یک kit ساخته میشود و در داشبورد در دسترس است. کافیست ان را کپی کنید و به پایان تگ body در html های خود paste کنید! به این kit که به ما کمک میکند تا بدون نیاز به دانلود تمام ایکون ها همه را از سایت اصلی بیاوریم CDN هم میگویند. بنابراین اینجا ما یک CDN FontAwesome ایجاد کردیم.

گام سوم: کپی کردن تگ های آیکون

دو ایکون را بصورت ازمایشی تست میکنیم تا مطمئن شویم واقعا کدهایمان کار میکنند. اینجا از سایت فونت اوسام (طبق ویدیو بالا) به بخش icons میرویم و مثلا سرچ میکنیم home . تمام ایکون هایی که مربوط به هوم باشند می ایند. ایکون دومی که انتخاب کردیم delete بود. برایتان این ایکون ها اشنا نیستند؟ قبلا بار های ان ها را در سایت های مختلف دیده اید!