استفاده از Genericons در وردپرس

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

ابتدا از این لینک(دانلود) فونت های مربوطه را دانلود نمایید و در پوشه font یا fonts قرار دهید و کد های زیر رو به ابتدای فایل style.css اضافه کنید :(ما در این آموزشی فونت ها رو درون پوشه font قرار دادیم.)

 @font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

استفاده از Genericons در وردپرس

برای مثال : ما با کد زیر آیکن چت رو به صفحه اضافه کردیم :

<div class="genericon genericon-chat"></div>

میتوانید از آیکن های دیگه ای استفاده بکنید، برای اینکار کد های زیر رو به فایل style.ss اضافه کنید و به جای content کد آیکن رو وارد بکنید :

مثال اول : 

.entry-meta .entry-comments-link:before {
	content: 'f108';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px/1 'Genericons';
	vertical-align: top;
}

مثال دوم : 

.entry-meta .entry-categories:before {
	content: 'f301';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 22px/1 'Genericons';
	vertical-align: top;
}

کد های بالا هر کدام یک آیکن رو نمایش میدن و ما در این جا این ۲ تاآیکن رو در داخل قالب قرار ادیم :

استفاده از Genericons در وردپرس

درباره تم لاین

بنده محمود هستم . علاقمند به وردپرس و کسب و کارهای اینترنتی. این سایت رو هم برای دوستداران وردپرس راه اندازی کردیم . انتقادات و پیشنهاداتتون رو از ما دریغ نکنید . با تشکر

موارد جالب

هواشناس سایت وردپرسی شما WP-Parsi Iran weather

هواشناس سایت وردپرسی شما WP-Parsi Iran weather سلام به همه دوستان وردپرسی؛ علیرضا هستم از ...

پاسخ دهید

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