آموزش نحوه استفاده از Font Icon ها در css3

چندی پیش در مورد آموزش اضافه نمودن فونت دلخواه به وب سایت در css3 را به شما عزیزان آموزش دادم که میتوانید از اینجا مشاهده نمایید .

اما در این پست از سایت اسکریپت دات کام , قصد دارم آموزش استفاده از Font Icon ها در وب سایت را دارم . شاید برایتان سوال پیش اومده باشه که Font Icon چیست ؟

تصاویری که به صورت وکتوری و در قالب فونت ارائه میشوند را Font Icon میگویند . طبیعتا دارای ویژگی های خاصی از جمله بارگذاری ساده و کم حجم , عدم محدودیت در سایز و … را دارا می باشد .

یکی از معروفترین فونت آیکون های حال حاضر , فونت آیکون Font Awesome میباشد که بنده در این مطلب , به آموزش این فونت آیکون خواهم پرداخت.

نکته مهم این است که تعداد فونت آیکون های زیادی در سراسر اینترنت هر روزه معرفی میشود که با یادگیری Font Awesome , شما میتوانید از آنها هم استفاده نمایید . به این دلیل که بسیار شبیه به هم هستند .

و اما آموزش :

در ابتدا باید فایل های مربوطه را دانلود و سپس بر روی سایت خود به روش زیر نصب نمایید .

دانلود آخرین ورژن Font Awesome

پس از دانلود , از فایل زیر خارج کرده و دو پوشه css و font را در روت سایت خود کپی نمایید .

حال کافیست در فایل html خود و در داخل تگ head , از تگ link برای اتصال فایل css ای که در پوشه css قرار دارد استفاده نمایید . به صورت زیر

<link href="css/font-awesome.min.css" rel="stylesheet">

توجه : در پوشه css , دو فایل css وجود دارد که فرقی باهم ندارند و کافیست یکی از آنها رو به صورت بالا لینک نمایید . ( یکی minify و فشرده شده می باشد و دیگری غیر فشرده )

حال در html خود هر کجا که خواستید میتوانید از فونت آیکون مورد نظر خود به صورت زیر استفاده نمایید :

<i class="fa fa-camera-retro"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-play"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"></i>
و ...

در بالا چند نمونه از فونت ها برای شما گذاشته شده که کلاس fa به معنی استفاده از فونت آیکون و fa-xxxxxx به معنی نوع عکس آیکونی میباشد .

شما عزیزان میتوانید با مراجعه به این لینک , لیست کاملی از اسامی عکس های آیکونی را مشاهده و از آنها استفاده نمایید . ( به جای xxxxxx , نام آیکون را وارد نمایید )

توجه : چون تمامی این عکس ها به صورت فونت میباشد , میتوانید از خاصیت های font و color در css استفاده نموده و سایز و رنگ فونت را زیاد یا کم نمایید .

به عنوان مثال :

<i class="fa fa-xxxxxx" style="font-size:50px;color:red"></i>

نکته مهم : بازهم متذکر می شوم که در اینجا از Font Awesome استفاده کردیم و شما عزیزان میتوانید از هر فونت آیکون دیگری به همین شیوه استفاده نمایید .

پخش اختصاصی

آموزش : وحید مجیدی