برای کسانی که با وب سر و کار دارند استفاده از آیکون های مختلف برای طراحی وب سایت خود مرسوم است اما سر کار داشتن با آنها برای تازه وارد ها شاید کمی مشکل باشد به همین دلیل امروز قصد دارم روشی دیگر را به شما آموزش بدم که بدون استفاده از آیکون بتوانید در پوسته و یا قالب سایت خودتان از آن استفاده کنید .
ابتدا به سایت Font-Awesome رفته و آخرین ورژن فونت ها را دانلود کنید
پوشه فونت را در پوسته خود بارگزاری کنید
کد زیر را در فایل css پوسته و یا قالب خود کپی کنید دقت کنید که آدرس فونت ها به درستی وارد شده باشد درغیر اینصورت به مشکل بر می خورید
@font-face { font-family: 'fontawesome-webfont'; src:url('fonts/fontawesome-webfont.eot?#') format('eot'), url('fonts/fontawesome-webfont.woff') format('woff'), url('fonts/fontawesome-webfont.ttf') format('truetype'); url('fonts/FontAwesome.otf') format('truetype'); url('fonts/fontawesome-webfont.svg') format('truetype'); }
خب حالا شما هر کجا که نیاز پیدا کردید که از یکی از آیکن ها مورد نیاز خود را استفاده کنید کافیه در فایل css خود در ID # و یا CLASS . و یا هر تگ دیگری که می خواهید ایکن خود را به نمایش در آورید میتوانید با استفاده از دستور
font-family:که باید FontAwesome باشد
به این صفحه مراجعه کنید و کد مورد نظر خود برای نشان دادن آیکن را انتخاب کنید
font-size اندازه آیکن را مشخص میکند
font-color رنگ آیکن را مشخص میکند
بطور مثال در کد زیر قلب با رنگ قرمز را نشان میدهد
.div:before{ display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; content: "f004"; font-size:8px; color: red; }منبع : وب کافه