فونت آیکون Font Awesome

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

ابتدا به سایت  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;
}

See the Pen Hswkh by p30softs (@p30softs) on CodePen.