فونت آیکن

استفاده آسان از Font Icon

اول از همه باید در مورد فونت آیکن کمی توضیح بدهم . در حقیقت فونت آیکن ها نوعی فونت هستند که مثل زمانی که در css فونت پیوست می کنید تا فونت متن صفحه تغییر کند. اما فونت آیکن ها با این نوع متفاوت است زیرا متن تغییر نمی دهند و نمی توان از آن ها برای تغییر متن استفاده کرد.

آیکن فونت ها در حقیقت جایگزین آیکن های (icons) شدند زیرا زیباتر و حجم کمتری دارند و می توان اندازه آن ها را تغییر داد بدون این که در کیفیت آن ها تاثیر داشته باشد.

یکی از مشکلات موجود حجم بالا این فونت ها است که معمولا از 200 نوع آیکن تشکیل شدن که ما هم به این همه نیاز نداریم و یک حجم زیاد و بدون استفاده داریم برای کم کردن این حجم من به شما یکی از بهترین سایت ها در این مورد را معرفی می کنم.

این سایت به شما این امکان را می دهد تا فقط فونت های مورد نیاز خود را انتخاب و دریافت کنید و از حجم زیاد فونت های اضافی خبری نیست.

وارد این سایت شوید fontello آیکن های خود را انتخاب کنید اندازه آیکن ها را تنظیم کنید اگر دوست دارید نام آن ها را تغییر دهید از کادر کنار دانلود استفاده کنید. حالا دانلود بزنید یک فایل فشورده به شما داده می شود در داخل فایل یک صفحه html هست که آیکن های شما را به همراه نام آن ها نمایش می دهد.

حال دو پوشه با نام های font و css را آپلود کنید و کد های زیر را در Head قالب سایت خود قرار دهید.

<link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/animation.css">
    <!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->

خب حال نام آیکن که در فایل demo.html هست را در کلاس قرار دهید مانند زیر

<i class="icon-ok-circle"></i>

امیدوارم آموزش خوبی بوده باشه.

منبع: MGroup

کپی نکنید و اگر کپی کردید لینک منبع قرار دهید.

باتشکر