آموزش استفاده از قابلیت FontAwesome در طراحی قالب های دیتالایف
حتما شما نیز در وب سایت ها با آیکون های مختلفی برخورد کرده اید و متوجه شده اید که این آیکون ها تصویر نیستند ، بلکه ویژگی متن رو دارن و اصطلاحا بهشون آیکون های متنی گفته میشه و برای شما این سوال پیش آمده که چطور از این آیکون ها در سایت خودم استفاده کنم ؟ آیا استفاده از این قابلیت در دیتالایف امکان پذیر هست ؟
از این رو با استفاده از این آموزش شما میتوانید به راحتی از قابلیت FontAwesome در طراحی قالب های دیتالایف بهره مند شوید.
نکته : استفاده از FontAwesome بجای استفاده از تصویر ، در طراحی تاثیر مثبتی در سئو دارد .
آموزش نصب
گام اول : دریافت فایل آخرین نسخه FontAwesome از وب سایت آن
در صفحه اصلی در قسمت هدر یه گزینه دانلود وجود داره که شما باید فایل رو دانلود کنید .
بعد از دانلود فایل و آنزیپ کردن اون ، پوشه font و فایل font-awesome.min.css موجود در پوشه css رو در مکان دلخواهتون آپلود کنید .
گام دوم : فراخوانی فایل font-awesome.min.css
با دستور زیر فایل را فراخوانی کنید :
گام سوم : انتخاب آیکون مورد نظر
به منظور انتخاب و ستیابی به کد آیکون مورد نظر به لینک زیر مراجعه کنید :
پس از انتخاب آیکون مورد نظر روی آن کلیک کنید ، در صفحه باز شده میتوانید کد مربوط به آیکون را دریافت و در محل مناسب از قالب خود استفاده کنید.
همچنین میتوانید بجای استفاده کد در tpl از class آیکون مورد نظر در فایل css استفاده کنید .
به منظور تغییر اندازه آیکون ها می توانید کد fa-1x یا fa-2x یا fa-3x را بصورت زیر به کد آیکون مورد نظر اضافه کنید :
به منظور آشنایی با سایر قابلیت های صفحه زیر را مطالعه کنید :
موفق و سربلند باشید.
در صفحه اصلی در قسمت هدر یه گزینه دانلود وجود داره که شما باید فایل رو دانلود کنید .
بعد از دانلود فایل و آنزیپ کردن اون ، پوشه 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