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


نویسنده : همیار مای بی بی

حتما تغییراتی که تازه در قالب فعلی همیار مای بی بی اعمال شده رو دیدید ، خب ما در بعضی از قسمت ها از آیکون استفاده کردیم ولی اونها به صورت عکس تصویری نیستن بلکه یه خاصیتی مثل متن رو دارن .
خب ما به این قابلیت میگیم : Font Awesome

خب برای استفاده از Font Awesome کافیه ابتدا به وبسایت اصلی این سایت رفته و آخرین نسخه رو دانلود کنید :



مراجعه به سایت Font Awesome



بعد از دانلود فایل و آنزیپ کردن اون ، پوشه font و فایل font-awesome.min.css موجود در پوشه css رو در مکان دلخواهتون آپلود کنید .
سپس با دستور زیر فایل ها رو فراخوانی کنید :



<link rel="stylesheet" href="css/font-awesome.min.css">
<!--[if IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
توجه : البته باید آدرس دهی فایل ها رو متناسب با جایی که آپلود میکنید ، اوکی کنید .


حالا می مونه نحوه استفاده از این قابلیت در صفحات وب

به صفحه زیر برید و آیکون ها رو مشاهده کنید :
صفحه آیکون ها

وقتی صفحه هر آیکون رو باز میکنید ، تگی همانند تگ زیر مشاهده میکنید :


<i class="icon-camera-retro"></i>

این تگ آیکون مورد نظر رو در صفحه فراخوانی میکنه .
البته سایز بندی هایی هم داره که میشه با اضافه کردن fa-1x ، fa-2x ، fa-3x تغییر بدید .

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



<i class="icon-camera-retro fa-2x"></i>

خب این هم از آموزش استفاده از قابلیت Font Awesome در طراحی وب
امیدواریم کاربردی بوده باشه .

منبع : همیار مای بی بی

موفق باشید
thanks
نویسنده :

X
پلاگین جوایز (OUGC Awards)
[align=center] [align=right] نام پلاگین : OUGC Awards نویسنده : Omar G لینک : http://mods.mybb.com ...
تعیین نشده
دیدگاه های کاربران 11
ارسال: 2
آقا جواد تا اونجا که من متوجه شدم این یک مجموعه کارکتر هست که به صورت فونت در آوردن 
پس حتماً قابلیت اعمال رنگ هم داره ! 
درسته ؟

پاسخ مسئول
ارسال: 3
بله رضا جان ، نمونه هاش رو میتونی در قالب فعلی ببینی

image
ارسال: 4
آقا جواد عزیز فایل "css/font-awesome-ie7.min.css" در نسخه آخر همین فونت وجود نداره Undecided
شما خودت داریش ؟ Huh
داخل IE مشکل پیش میاد Sad

پاسخ مسئول
ارسال: 5
فایل رو برات پیوست رضا جان
امتحان کن ببین جواب میده


فایل‌(های) پیوست شده
نام فایل : font-awesome-ie7.min.css
اندازه : 36.9 KB
پسورد : www.mybbco.ir
فقط اعضا میتوانند فایل پیوست را دریافت کنند .

image
ارسال: 6
آقا جواد درست نشد 
داخل IE ویندوز 8 مشکل داره 
من داخل هدر اون قالبی که روش کار میکنم لینکش کردم 
حالا مشکلی نیست میشه پیامی گذاشت که با IE کار نمیکنه ولی خیلی حیف بود چون طراحی رو متحول کرده
داخل MyBB چه طور استفاده کنیم ؟
ارسال: 7
شما به من طرحت رو نشون بدی با لینک یا هرچیزی شاید بتونم
کمک کنم،البته چون ایمپورت میشه نباید با آی ای مشکلی داشته
باشه...
ارسال: 8
آقا ایمان عزیز 
دارم برای تمرین روی یک تمپلیت کار میکنم تا کار کردن با این فونت رو تمرین کرده باشم 
ولی دمت گرم ایمپورت گرفتم درست شد thanks
ارسال: 9
داداش اگه بخوام تو هاور ی کلاس اینارو هم بزرگ و هم تغییر رنگ بدم چیکار کنم؟

پاسخ مسئول
ارسال: 10
(2014-05-20T21:40:31+00:00 2014-05-20T21:40:31+00:00)Mr.Mostafa نوشته :  داداش اگه بخوام تو هاور ی کلاس اینارو هم بزرگ و هم تغییر رنگ بدم چیکار کنم؟

خب یه کلاس id ایجاد میکنی به صورت زیر :
<i id="your-id" class="icon-camera-retro"></i>

حالا توی global.css کدش به اینصورت میشه :
#your-id {
محل قرار گیری کدها
}

image
ارسال: 11
من در headerinclude اين كد رو اضافه كردم
<link rel="stylesheet" href="images/royalfuns-v4/fontsimages/allflat/fonts/font-awesome.min.css">
و بعد در يه جايي مثلا منو 
<a href="index.php"><i class="fa fa-desktop"></i><div class="navtab">صفحه اصلی</div></a>

قرار دادم ولي نيومد

مشكل از چي هست Huh

پاسخ مسئول
ارسال: 12
(2014-05-24T12:33:04+00:00 2014-05-24T12:33:04+00:00)Mr President نوشته :  من در headerinclude اين كد رو اضافه كردم
<link rel="stylesheet" href="images/royalfuns-v4/fontsimages/allflat/fonts/font-awesome.min.css">
و بعد در يه جايي مثلا منو 
<a href="index.php"><i class="fa fa-desktop"></i><div class="navtab">صفحه اصلی</div></a>

قرار دادم ولي نيومد

مشكل از چي هست Huh

توی مسیری که ذکر کردید :
http://forum.man0to.com/images/royalfuns-v4/fontsimages/allflat/fonts/font-awesome.min.css

فایلی موجود نیست برای همین عمل نمیکنه

image

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :