نحوه استفاده از FONT AWESOME

هدایت عباسی آموزش HTML

آموزش ویدیویی نحوه استفاده از FONT AWESOME

در این فیلم و آموزش ویدئویی نحوه استفاده از FONT AWESOME در سایت و html را خواهید آموخت.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش html از تاپ سایت 98 قصد داریم نحوه استفاده از FONT AWESOME را بیاموزیم. فایل های FONT AWESOME و کد کامل را می توانید در قسمت زیر دانلود نمایید. در کد زیر نحوه استفاده از FONT AWESOME را خواهید آموخت.

دانلود فایل های FONT AWESOME

دانلود فایل های FONT AWESOME و کد html,css آن و نحوه استفاده از فونت آیکون ها.

دانلود فایل های FONT AWESOME و کد آن

مزیت FONT AWESOME

مزیت FONT AWESOME این است که بجای تصویر می توانیم از فونت استفاده کنیم و برای تغییر سایز تصویر از font-size استفاده می کنیم.

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

روش استفاده از فونت آیکون ها

در این بخش روش استفاده از فونت آیکون ها و FONT AWESOME را خواهید آموخت.

برای این کار با یک مثال عملی شروع می کنیم. این مثال در لینک بالا وجود دارد دانلود کرده و تست نمایید.

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

مرحله یک ابتدا فونت های آن را در یک پوشه fonts قرار دهید.

مرحله دوم فایل fontawesome.css را در پوشه css قرار دهید.

مرحله سوم کد font را در فایل style.css قرار دهید. آدرس فایل ها باید درست باشد وگرنه کار نمی کند.

مرحله چهارم لینک کردن فایل style.css و fontawesome.css به صفحه html .

در صورتی که هر یک از مراحل اشتباه باشد با خطا مواجه می شوید.

کد html نحوه استفاده از FONT AWESOME

کد html نحوه استفاده از FONT AWESOME را در قسمت پایین مشاهده می کنید.

کد html , css در لینک بالا موجود است دانلود نمایید.

از تگ i و کلاس fa استفاده می کنیم. آیکون ها و اشکال مختلف در FONTAWESOME وجود دارد.

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

حتما برای اتصال فایل های css از link استفاده نمایید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>تاپ سایت 98</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/styleTest.css">
</head>
<body>
<h1>تاپ سایت 98</h1>
<p>TopSite98.com</p>
<i style="font-size: 50px" class="fa fa-phone"></i>
</body>
</html>

کد css نحوه استفاده از FONT AWESOME

در قسمت پایین ، کد css نحوه استفاده از FONT AWESOME را مشاهده می کنید.

حتما باید فایلهای فونت eot , woff , ttf در پوشه fonts موجود باشد.

به آدرس فایل ها دقت نمایید در صورتی که نام فایلها یا آدرس آنها اشتباه باشد آیکون ها نمایش داده نمی شود.

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0')
format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0')
format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0')
format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}