فونت آیکون و نحوه استفاده از آن در طراحی سایت
سلام
اگر طراح سایت باشید حتما میدانید که یکی از مهم ترین ویژگی های سایت لود سریع صفحات سایت است، و این لود سریع صفحات سایت با استفاده از تصاویر بیشتر و بیشتر می شود، در اینجاست که فونت آیکون ها به کمک ما می آیند تا علاوه بر اینکه زیبایی سایت خود را از دست ندیم، سرعت بارگزای سایت را افزایش دهیم، در ادامه همراه بپرسم باشید تا یک تعریف کلی از فونت آیکون ها داشته باشیم.
فونت آیکون
- فونت آیکون چیست؟
فونت آیکون ها نوع تصویری فونت نوشتاری هستند، بدین معنا که حروف و اعداد که در فونت نوشتاری وجود دارد، تبدیل به اشکال شده که می توانیم همانگونه که به متن های معمولی در وب استایل میدهیم به فونت آیکن ها هم نیز استایل بدهیم.
- مزایای استفاده از فونت آیکن
فواید بسیاری در استفاده از فونت آیکون ها هست، که در ادامه به برخی از آنها اشاره میکنیم:
- پشتیبانی در تمام مرورگرها
- سرعت بارگزاری بسیار بالا
- استایل دهی به فونت آیکون ها توسط Css
- عدم افت کیفیت فونت آیکون ها در بزرگنمایی صفحات
- و ….
- سایت های ارائه دهنده فونت آیکون
در دنیای وب؛ سایت های بسیاری وجود دارند که فونت آیکون رایگان ارائه میدهند که ما میتوانیم از آنها استفاده کنیم، در ادامه به معرفی برترین ها می پردازیم:
- Font Awesome: برای ورود به سایت کلیک کنید.
- OpenIconic : برای ورود به سایت کلیک کنید.
- IcoFont: برای ورود به سایت کلیک کنید.
با ورود به سایت مربوطه، آموزش استفاده از فونت آیکن قرار دارد، با این حال آموزش استفاده از فونت آیکون های سایت Font Awesome را در ادامه آموزش میدهیم.
- آموزش استفاده از فونت آیکون های سایت Font Awesome
برای این کار می توانید به سایت Font Awesome مراجعه کنید و با ورود به بخش Download فایل های مربوطه را دانلود کنید.
در ادامه به آموزش استفاده از فونت آیکون بدون دانلود فایل های فونت آیکون می پردازیم.
- ابتدا در تگ heaed سایت، کد زیر را قرار دهید.
|
۱ |
<link rel="stylesheet" type="text/css" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> |
- سپس به این صفحه مراجعه کنید و هر آیکونی که میخواید در صفحه وب قرار دهید را انتخاب کنید.
- بعد از اینکه روی آیکون مورد نظر کلیک کردید، وارد صفحه کد فونت آیکن میشوید، کد فونت آیکون چیزی شبیه به کد زیر است:
|
۱ |
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i> |
همین کد بالا را برداشته و در بین کدهای HTML هر کجا که میخواهید نمایش داده شود قرار دهید.
مثال:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ |
<html> <title> فونت آیکون - beporsam.ir </title> <head> <link rel="stylesheet" type="text/css" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> </head> <body> <i class="fa fa-calendar-plus-o" aria-hidden="true"></i> </body> </html> |
این نمونه مثال ساده ای از نحوه ی استفاده از فونت آیکون ها می باشد.
در آموزش های بعدی، آموزش کامل و حرفه ای استفاده از فونت آیکون ها را در سایت قرار میدهیم.
این آموزش نیز به پایان رسید …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید