زمان کنونی: ۱۱-۱-۱۴۰۳, ۱۲:۲۸ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
استفاده از فونت به جای آیکن
۱۱-۱۰-۱۳۹۳, ۰۸:۲۳ عصر
ارسال: #1
استفاده از فونت به جای آیکن
تا بحال به این موضوع فکر کرده اید که چگونه حجم سایت را کاهش و سرعت بارگذاری آن را افزایش دهید؟
زمانیکه ما آیکن های مختلف را به صورت معمولی و یا sprite شده در سایت استفاده می کنیم سبب میشویم تا زمان بارگذاری صفحه بالا رود و همین طور ممکن است که به صورت نخواسته به سایت خودمان آسیب بزنیم .همچنین شاید ما قصد داشته باشیم که سایت خود را به صورت ریسپانسیو کد نویسی کنیم .و در این جا برای نمایش آیکن ها در تبلت ها و موبایل ها مجبوریم از آیکن های کوچکتر بهره بگیریم .راه حلی که کارشناسان طراحی صفحات وب اخیرا به آن دست پیداکرده اند استفاده از فونت به جای آیکن می باشد.
ما به راحتی میتوانیم با لود کردن یک فونت در فایل css خود نه تنها این مشکلات را حل نماییم بلکه با افزایش سرعت بارگزاری وب سایت کمک شایانی در بهبود رنکینگ وب سایت خود داشته باشیم.
نحوه استفاده از این روش:
ما میتوانیم از برخی سایتهایی که در این زمینه امکاتانی را ارئه می دهند بهره گیری نماییم:
برای مثال ما از وب سایت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
استفاده می نماییم
1: ابتدا فونت awesome را دانلود کنید .
2-فونت ها را در پوشه ای به نام فونت قرار دهید .سپس یک پوشهcss ایجاد و فایل css خود را در آن به وجود آورید و از طریق کد زیر فوتا دانلود شده را در ابتدای فایل 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;
}
3- در این مرحله هر کجا که نیاز پیدا کردید که از یکی از آیکن ها مورد نیاز خود را استفاده کنید کافیه در فایل css خود در ID # و یا CLASS . و یا هر تگ دیگری که می خواهید ایکن خود را به نمایش در آورید میتوانید با استفاده از دستور

font-family:که باید FontAwesome باشد
content به این صفحه مراجعه کنید و کد مورد نظر خود برای نشان دادن آیکن را انتخاب کنید
font-size اندازه آیکن را مشخص میکند
font-color رنگ آیکن را مشخص میکند
بطور مثال در کد زیر قلب با رنگ فیروزه ای را نشان میدهد


.unlike:before{

display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
content: "\f004";
font-size:8px;
color: rgb(0, 255, 255);

}
امضاء sb7842
به امید سرافرازی ایران عزیز
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان