رفتن به مطلب
محمدیان

fontawesome بجای آیکون ها در css

Recommended Posts

با سلام و عرض ادب

 

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

راه حلی که اخیرا از اون استفاده میشه و به تازگی در حال گسترش هست ، استفاده از فونت ها هست . شما میتونید به راحتی یک فونت رو در فایل css خودتون لود کنید و از اون برای تصاویر و آیکون های سایتتون استفاده کنید . این امر بسیار سریع تر از روش های پیشین عمل میکنه و سرعت بارگزاری صفحه ی وب شمارو هم افزایش میده ، حتی همین کاهش زمان لود ارزش سایت شمارو در موتورهای جستجوگر نیز افزایش میده .

 

یکی از سایت هایی که میتونه به شما کمک کنه سایت معروف http://fontawesome.io هست .

 

مرحله اول : در ابتدا از طریق این لینک فونت AwoSome رو دانلود کنید .

مرحله دوم : پس از دانلود فونت ، فونت هارو در پوشه ای به نام fonts قرار بدید . یک پوشه ی css ایجاد کنید و فایل css تون رو در آن ایجاد کنید . از طریق کد زیر فونت AwoSome رو در ابتدای فایل css تعریف کنید .

@font-face {
 
  font-family: 'FontAwesome';
 
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
 
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
 
  url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
 
  url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
 
  url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
 
  font-weight: normal;
 
  font-style: normal;
 
}

مرحله سوم :  هر کاراکتری که نیاز دارید رو از فایل css بردارید و در فایل css اصلی سایتتون قرار بدید و استفاده کنید . به عنوان مثال ما سه کاراکتر توییتر ، فیس بوک و گیت هاب رو برمیداریم و در سایتمون نمایش میدیم . کد css این سه کاراکتر بصورت زیر هست :

.fa-twitter:before {
 
  content: “f099”;
 
}
 
.fa-facebook:before {
 
  content: “f09a”;
 
}
 
.fa-github:before {
 
  content: “f09b”;
 
}

حالا به سراغ کد html میریم تا از این css ها استفاده کنیم . ما سه عنصر span برای این سه آیکون در نظر میگیریم :

<span class="fa-twitter"></span>
 
<span class="fa-facebook"></span>
 
<span class="fa-github"></span>

در کد html کلاس مورد نظر رو به هر عنصر اختصاص میدید .

چطور متوجه بشید که کدوم فونت چه آیکونی رو تشکیل میده ! برای این کار به سایت اصلی  http://fontawesome.io بروید و بر روی گزینه ی icons  در منوی بالا کلیک کنید . یک صفحه با کتابخانه ای از فونت ها برای شما به نمایش درمیاد . آیکون هارو میبینید ، نام هر کدوم که مد نظرتون بود رو کپی کنید و در فایل css جستجو کنید . با این کار میتونید کد آیکون مورد نظرتون رو پیدا کنید و در پروژتون استفاده کنید .

 

موفق وسربلند باشید

  • Upvote 2

به اشتراک گذاشتن این پست


لینک به پست
اشتراک در سایت های دیگر

ایجاد یک حساب کاربری و یا به سیستم وارد شوید برای ارسال نظر

کاربر محترم برای ارسال نظر نیاز به یک حساب کاربری دارید.

ایجاد یک حساب کاربری

ثبت نام برای یک حساب کاربری جدید در انجمن ها بسیار ساده است!

ثبت نام کاربر جدید

ورود به حساب کاربری

در حال حاضر می خواهید به حساب کاربری خود وارد شوید؟ برای ورود کلیک کنید

ورود به سیستم

×