آیکن فونت ها نقش اساسی در زیبایی سایت دارند و براحتی میتوانید از آیکن ها در هر جای قالب استفاده کنید،ما در این پست 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;
}برای مثال : ما با کد زیر آیکن چت رو به صفحه اضافه کردیم :
<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;
}کد های بالا هر کدام یک آیکن رو نمایش میدن و ما در این جا این ۲ تاآیکن رو در داخل قالب قرار ادیم :
