نحوه استفاده از فونت های سمبلیک در طراحی سایت

[mahdi.iqu]

با سلام دوستان
شاید شما هم دیده باشید که توی برخی از وب سایت ها به جای استفاده از تصویر از فونت استفاده میکنند
مثلا یه فونتی رو با فونت فیس فرا میخونند با جایی با اون فونت یک تصویر به وجود میارند!!
کسی روش کار رو بلده؟
مثلا فونت زیر:
http://awebfont.ir/fonts?cat_id=11&fonts_id=1961
آیاا کسی از دوستان فونتی رو میشناسه که موارد زیر رو داخلش داشته باشه
Rss,facebook,googleplus,twiter
اصلا میشه خودمون چنین فونتایی رو بسازیم؟
لطفا راهنمایی کنید

[qartalonline]

یه سری به اینجا بزنید:
http://fontawesome.io

[mahdi.iqu]

داداش تازه واردم تو این مباحث با یه مثال میتونی توضیح بدی؟

[mahdi.iqu]

دوستان دیگر میشه کمک کنند؟

[qartalonline]

از لینک زیر فایل رو دانلود کنید:
http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip
فایل شامل فونت و فایل css هستش فایل css رو داخل صفحه html ضمیمه کنید برای نحوه استفاده از آیکون هم از لینک زیر کمک بگیرید:
http://fortawesome.github.io/Font-Awesome/examples/
در لینک زیر هم نام آیکونها رو میتونید مشاهده کنید:
http://fortawesome.github.io/Font-Awesome/cheatsheet/

[mahdi.iqu]

ممنون عزیز
فقط دو تا سوال
چرا از Befor استفاده کرده؟اصلا این چی هست؟و اصلاحا بهش چی میگن(تگ ،خاصیت یا...؟)؟
و اینکه این تو اینترنت اکسپلوره هم کار میکنه؟

[qartalonline]

چون با css3 پیاده سازی شده باید یا از after استفاده میکرده یا از befor. به خاطر برخی مزایا از befor استفاده شده. befor یه selector در css3 میباشد.
با ie8 و بالاتر سازگاری داره. اگه میخواین مثلا تو ie7 استفاده کنید باید از ورژن های پایین استفاده کنید.