دیتالایف انجین فارسی

استفاده از قابلیت Font Awesome در دیتالایف

تاریخ انتشار: 11 فروردین 1395
ارسال کننده: guitar-on-fire
آموزش استفاده از قابلیت FontAwesome در طراحی قالب های دیتالایف
حتما شما نیز در وب سایت ها با آیکون های مختلفی برخورد کرده اید و متوجه شده اید که این آیکون ها تصویر نیستند ، بلکه ویژگی متن رو دارن و اصطلاحا بهشون آیکون های متنی گفته میشه و برای شما این سوال پیش آمده که چطور از این آیکون ها در سایت خودم استفاده کنم ؟ آیا استفاده از این قابلیت در دیتالایف امکان پذیر هست ؟
از این رو با استفاده از این آموزش شما میتوانید به راحتی از قابلیت FontAwesome در طراحی قالب های دیتالایف بهره مند شوید.
نکته : استفاده از FontAwesome بجای استفاده از تصویر ، در طراحی تاثیر مثبتی در سئو دارد .
استفاده از قابلیت Font Awesome در دیتالایف
  • آموزش نصب
  • سوالات متداول
  • تصاویر
گام اول : دریافت فایل آخرین نسخه FontAwesome از وب سایت آن

در صفحه اصلی در قسمت هدر یه گزینه دانلود وجود داره که شما باید فایل رو دانلود کنید .
بعد از دانلود فایل و آنزیپ کردن اون ، پوشه font و فایل font-awesome.min.css موجود در پوشه css رو در مکان دلخواهتون آپلود کنید .
گام دوم : فراخوانی فایل font-awesome.min.css
با دستور زیر فایل را فراخوانی کنید :
<link media="screen" href="{THEME}/style/font-awesome.min.css" type="text/css" rel="stylesheet" />
توجه : آدرس دهی فایل متناسب با محل آپلود باشد .
گام سوم : انتخاب آیکون مورد نظر
به منظور انتخاب و ستیابی به کد آیکون مورد نظر به لینک زیر مراجعه کنید :

پس از انتخاب آیکون مورد نظر روی آن کلیک کنید ، در صفحه باز شده میتوانید کد مربوط به آیکون را دریافت و در محل مناسب از قالب خود استفاده کنید.
همچنین میتوانید بجای استفاده کد در tpl از class آیکون مورد نظر در فایل css استفاده کنید .
به منظور تغییر اندازه آیکون ها می توانید کد fa-1x یا fa-2x یا fa-3x را بصورت زیر به کد آیکون مورد نظر اضافه کنید :
< i class="icon-camera-retro fa-2x" />< / i >

به منظور آشنایی با سایر قابلیت های صفحه زیر را مطالعه کنید :

موفق و سربلند باشید.
جهت حرکت چرخشی آیکون های انتظار ، کد fa-spin و fa-pulse را به صورت زیر اضاف کنید :
<i class="fa fa-spinner fa-spin" />< / i >
<i class="fa fa-spinner fa-pulse" /> < / i >

جهت چرخش آیکون ها به صورت زیر عمل کنید :
<i class="fa fa-shield">< / i > normal<br >
<i class="fa fa-shield fa-rotate-90">< / i > fa-rotate-90<br >
<i class="fa fa-shield fa-rotate-180">< / i > fa-rotate-180<br >
<i class="fa fa-shield fa-rotate-270">< / i > fa-rotate-270<br >
<i class="fa fa-shield fa-flip-horizontal">< / i > fa-flip-horizontal<br >
<i class="fa fa-shield fa-flip-vertical">< / i > fa-flip-vertical

و برای استفاده ترکیبی از دو آیکون به شکل زیر عمل کنید :
< span class="fa-stack fa-lg" > <i class="fa fa-square-o fa-stack-2x">< / i > <i class="fa fa-twitter fa-stack-1x">< / i >
</span >
fa-twitter on fa-square-o<br >
<span class="fa-stack fa-lg" > <i class="fa fa-circle fa-stack-2x">< / i > <i class="fa fa-flag fa-stack-1x fa-inverse">< / i >
</s pan>
fa-flag on fa-circle<br >
<span class="fa-stack fa-lg" > <i class="fa fa-square fa-stack-2x">< / i > <i class="fa fa-terminal fa-stack-1x fa-inverse">< / i >
</span >
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x">< / i > <i class="fa fa-ban fa-stack-2x text-danger">< / i >
</s pan>
fa-ban on fa-camera
استفاده از قابلیت Font Awesome در دیتالایف
8 نفر (6 کاربر و 2 میهمان) از این مطلب تشکر کرده اند.
تشکر
مدیر سایت
15 فروردین 1395 - 10:47
مطلب مفیدی ست
خدا قوت

--------------------
میهمان
12 شهریور 1395 - 17:13
باسلام و احترام
ممنون بابت مطالب مفیدتون
جهت ارسال نظر، فرم زیر را تکمیل نمائید:
نام:*
ایمیل:*
متن نظر:

 
پررنگکج خط دارخط دار در وسط|سمت چپوسط سمت راست|قرار دادن شکلکانتخاب رنگ|پنهان کردن متنقراردادن نقل قولتبدیل نوشته ها به زبان روسیقراردادن Spoiler
کد امنیتی: *