*مینا*
مــدیـر بـازنشـسـتـه
- تاریخ ثبت‌نام
- Sep 12, 2013
- ارسالی‌ها
- 3,063
- پسندها
- 366
- امتیازها
- 83
- محل سکونت
- زیر اسمون خدا
- تخصص
- ترانه سرا
- دل نوشته
- هر وقت دلت شکست خورده هاشو خودت جمع کن نزار هر نامردی منت دست زخمیشو روت بزاره
- بهترین اخلاقم
- بخشیدن
- مدل گوشی
-
- سیم کارت
-
- تیم ایرانی مورد علاقه
-
- تیم باشگاهی مورد علاقه
-
[h=2]آموزش استفاده از فونت بجای آیکون در طراحی سایت[/h]
به نام خدا
امروز یک آموزش خوب واسه مبتدیانی که تا به حال از تصاویر برای طراحی سایت به عنوان آیکن استفاده میکردن دارم
ترفندی که منجر به کمتر شدن حجم کلی سایت و بالا رفتن سرعت بارگزاری صفحات میشود.
-------------------------------------------------------------
خوب بریم سر آموزش
سایت http://fontawesome.io که در این ضمینه کار بسیار جالبی انجام داده و تمام کد های استایل رو یکجا جمع آوری کرده و کار طراحان رو راحت کرده
این آیکن هارو میتونید در آدرس زیر مشاهده کنید
http://fontawesome.io/icons/
خوب اپتدا یک فایل زیپ که کد تمامی آیکن ها در آن وجود دارد را از لینک زیر دانلود کنید:
http://fontawesome.io/assets/font-awesome-4.1.0.zip
حالا اونو از حالت فشرده خارج کنید . خواهید دید لیست فایل ها و فولدر های موجود در این فایل زیپ را !!!!
کد:
css
fonts
less
scss
خوب حالا این پوشه هارو توی قالب دلخواهتون کپی کنید و کار مهم تر از اون اینه که در صفحاتی که میخواهید از این آیکن ها استفاده کنید کد زیر را در قسمت head وارد کنید: (لینک کردن فایل css)
کد:
<head>
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
</head>
توجه داشته باشید که باید آدرس محل قرار گیری فایل های font-awesome.min.css و font-awesomecss که در پوشه css هستند رو صحیح وارد کنید چرا که ممکنه شما در محل دیگه ای اونو کپی کرده باشید.
بگذریم....
-------------------------------------------------
خوب حالا برای وارد کردن آیکن ها شما کار سختی در پیش ندارید فقط باید از یک span استفاده کنید
به مثال زیر دقت کنید:
کد:
<span class="fa iconcode size"></span>
خوب در این کد عبارت fa ثابته و همیشه باید باشه و iconcode در واقع کلاس مربوط به آیکون های مختلف هستش که میتونید کلاس مربوط به هر آیکن را در کنار آیکن در لینک زیر ببینید:
http://fontawesome.io/icons/
به عنوان مثال برای قرار دادن آیکن خودرو که در بالا ترین قسمت آیکن ها قرار داره کدی شبیه به کد زیر بدست میاد:
کد:
<span class="fa fa-car"></span>
دقت داشته باشید که تعیین سایز اجباری نیست و میتوان آنرا وارد نکرد
اما در صورتی که بخواهیم آیکون مورد نظر رو در سایز های مختلف داشته باشیم بجای عبارت size تنها عبارات زیر میتواند قرار گیرد (از کوچک به بزرگ):
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
پس اگه بخواییم آیکن خودرو رو در سایز های مختلف داشته باشیم به ترتیب از کوچیک به بزرگ کد ها میشن:
کد:
<span class="fa fa-car fa-lg"></span>
<span class="fa fa-car fa-2x"></span>
<span class="fa fa-car fa-3x"></span>
<span class="fa fa-car fa-4x"></span>
<span class="fa fa-car fa-5x"></span>
خوب همونطور که میبینید آیکن های مختلف رو براحتی با کمترین حجم ممکن میتونید در صفحاتتون استفاده کنید.
و اما چند نکته کلیدی:
شما بجای span میتوانید از li هم استفاده کنید ( به صورت پیشفرض)
و اما نکته دوم رنگی کردن آیکن ها هستش که خیلی راحته فقط باید به span یک style نسبت بدیم و با خاصیت color به آیکنمون رنگ بدیم
به مثال زیر دقت کنید:
کد:
<span class="fa fa-car fa-lg" style="color:red"></span>
<span class="fa fa-life-ring fa-2x" style="color:blue"></span>
<span class="fa fa-cloud-download fa-3x" style="color:green"></span>
<span class="fa fa-info-circle fa-4x" style="color
range"></span>
<span class="fa fa-share-square fa-5x" style="colorurple"></span>
نکته سوم هم بگم و آموزشو به پایان برسونم
با زوم کردن صفحه معمولا تصاویر وضوح خود را از دست میدهند و این در حالی است که این آیکن ها واضح تر هم میشوند!!!! :دی
خوب دوستان فایل تمرینی ضمیمه شد دانلود کنید تا نحوه کار رو کاملا لمس کنید.
امروز یک آموزش خوب واسه مبتدیانی که تا به حال از تصاویر برای طراحی سایت به عنوان آیکن استفاده میکردن دارم
ترفندی که منجر به کمتر شدن حجم کلی سایت و بالا رفتن سرعت بارگزاری صفحات میشود.
-------------------------------------------------------------
خوب بریم سر آموزش
سایت http://fontawesome.io که در این ضمینه کار بسیار جالبی انجام داده و تمام کد های استایل رو یکجا جمع آوری کرده و کار طراحان رو راحت کرده
این آیکن هارو میتونید در آدرس زیر مشاهده کنید
http://fontawesome.io/icons/
خوب اپتدا یک فایل زیپ که کد تمامی آیکن ها در آن وجود دارد را از لینک زیر دانلود کنید:
http://fontawesome.io/assets/font-awesome-4.1.0.zip
حالا اونو از حالت فشرده خارج کنید . خواهید دید لیست فایل ها و فولدر های موجود در این فایل زیپ را !!!!
کد:
css
fonts
less
scss
خوب حالا این پوشه هارو توی قالب دلخواهتون کپی کنید و کار مهم تر از اون اینه که در صفحاتی که میخواهید از این آیکن ها استفاده کنید کد زیر را در قسمت head وارد کنید: (لینک کردن فایل css)
کد:
<head>
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
</head>
توجه داشته باشید که باید آدرس محل قرار گیری فایل های font-awesome.min.css و font-awesomecss که در پوشه css هستند رو صحیح وارد کنید چرا که ممکنه شما در محل دیگه ای اونو کپی کرده باشید.
بگذریم....
-------------------------------------------------
خوب حالا برای وارد کردن آیکن ها شما کار سختی در پیش ندارید فقط باید از یک span استفاده کنید
به مثال زیر دقت کنید:
کد:
<span class="fa iconcode size"></span>
خوب در این کد عبارت fa ثابته و همیشه باید باشه و iconcode در واقع کلاس مربوط به آیکون های مختلف هستش که میتونید کلاس مربوط به هر آیکن را در کنار آیکن در لینک زیر ببینید:
http://fontawesome.io/icons/
به عنوان مثال برای قرار دادن آیکن خودرو که در بالا ترین قسمت آیکن ها قرار داره کدی شبیه به کد زیر بدست میاد:
کد:
<span class="fa fa-car"></span>
دقت داشته باشید که تعیین سایز اجباری نیست و میتوان آنرا وارد نکرد
اما در صورتی که بخواهیم آیکون مورد نظر رو در سایز های مختلف داشته باشیم بجای عبارت size تنها عبارات زیر میتواند قرار گیرد (از کوچک به بزرگ):
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
پس اگه بخواییم آیکن خودرو رو در سایز های مختلف داشته باشیم به ترتیب از کوچیک به بزرگ کد ها میشن:
کد:
<span class="fa fa-car fa-lg"></span>
<span class="fa fa-car fa-2x"></span>
<span class="fa fa-car fa-3x"></span>
<span class="fa fa-car fa-4x"></span>
<span class="fa fa-car fa-5x"></span>
خوب همونطور که میبینید آیکن های مختلف رو براحتی با کمترین حجم ممکن میتونید در صفحاتتون استفاده کنید.
و اما چند نکته کلیدی:
شما بجای span میتوانید از li هم استفاده کنید ( به صورت پیشفرض)
و اما نکته دوم رنگی کردن آیکن ها هستش که خیلی راحته فقط باید به span یک style نسبت بدیم و با خاصیت color به آیکنمون رنگ بدیم
به مثال زیر دقت کنید:
کد:
<span class="fa fa-car fa-lg" style="color:red"></span>
<span class="fa fa-life-ring fa-2x" style="color:blue"></span>
<span class="fa fa-cloud-download fa-3x" style="color:green"></span>
<span class="fa fa-info-circle fa-4x" style="color
range"></span><span class="fa fa-share-square fa-5x" style="color
urple"></span> نکته سوم هم بگم و آموزشو به پایان برسونم
با زوم کردن صفحه معمولا تصاویر وضوح خود را از دست میدهند و این در حالی است که این آیکن ها واضح تر هم میشوند!!!! :دی
خوب دوستان فایل تمرینی ضمیمه شد دانلود کنید تا نحوه کار رو کاملا لمس کنید.