بخش مقالات آکادمی | Articles
آخرین آموزش ها

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

معرفی Font Awesome:

شما میتونین با  سایت Font Awesome که زیرمجموعه های Github محسوب میشه، از کتابخانه عظیم آیکونی این سایت بهره ببرین. برای استفاده از آیکونهای Font Awesome کافیه که خط پیرو زیر رو در قسمت <head> صفحه HTML تون  اضافه کنید.

<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>

سپس شما آیکون Font Awesome دلخواتون رو با پیشوند fa و اسم آیکون استفاده میکنین. به کدزیر توجه کنین:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-car”></i>

<i class=”fa fa-car” style=”font-size:48px;”></i>
<i class=”fa fa-car” style=”font-size:60px;color:red;”></i>
</body>
</html>

Font Awesome برای استفاده در عناصر درون خطی طراحی شده. عموما از عنصرهای <i> و <span> برای آیکون ها استفاده میشن. توجه داشته باشین که هر تغییری در اندازه فونت و رنگ در محتوای آیکون بدین، آیکون هم تغییر میکنه. تغییرات یکسان برای هرچیزی به کار میره مثلا سایه ها از CSS ارث میبره.

آیکون های بزرگتر:

برای افزایش سایز آیکون از کلاس هایی استفاده میکنیم که سایز آیکون استفاده میشوند. مثلا fa-lg سایز آیکون رو 33% افزایش میده. به همین ترتیب fa-2x fa-3x fa-4x fa-5x موجب افزایش ساز ایکون میشن. مثال زیر رو در نظر بگیرین:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-car fa-lg”></i>
<i class=”fa fa-car fa-2x”></i>
<i class=”fa fa-car fa-3x”></i>
<i class=”fa fa-car fa-4x”></i>
<i class=”fa fa-car fa-5x”></i>
</body>
</html>

اگر ایکون های شما به هم ریخت و دریک خط قرار نگرفت line-height رو افزایش بدین.

آیکون های لیستی:

از دو کلاس fa-ul و fa-li برای جایگزین گلوله در لیست های نامرتب استفاده میکنند. همچنان برای اینکه متوجه بشین کد زیر رو امتحان بکنین.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<ul class=”fa-ul”>
<li><i class=”fa-li fa fa-check-square”></i>List icons</li>
<li><i class=”fa-li fa fa-spinner fa-spin”></i>List icons</li>
<li><i class=”fa-li fa fa-square”></i>List icons</li>
</ul>
</body>
</html>

در سری بعد مقاله Font Awesome بهتون امکانات بیشتری برای استفاده از آیکون هارو میدیم. درضمن توجه داشته باشین که تمام کد های گفته شده رو در یک ویرایشگر متن امتحان کنین. راحت ترین کار Nodepad رو باز کنین و فایل رو با فرمت html. ذخیره کنین و با مرورگرتون باز کنین تا تغییراتی که دادین رو مشاهده کنید.

ممنون از همراهیتون.

تاریخ ارسال
29 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
304 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.

برچسب ها

,