فونت آیکون Font Awesome

font-awesco

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

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

منبع : وب کافه

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

آشنایی با دو عنصر rgb و rgba در CSS

آشنایی با دو عنصر rgb و rgba در CSS

rgb و rgba در اصل یکی هستند . و rgba نسخه جدیدتری نسبت به rgb …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *