logo
logo
تبلیغ کلیکی تاپ سایت 98

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

نحوه استفاده از 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;
}

سایت fontawesome

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

استفاده از FONT AWESOME در html

برای استفاده از FONT AWESOME در html ، مراحل بالا را انجام دهید.

برای استفاده از آیکون ها ، اگر از ادیتور یا نرم افزارهای حرفه ای استفاده نمایید ، لیست آنها نمایش داده می شود.

امیدواریم این آموزش برای شما کاربردی باشد مثال ها تست شده می باشد و کاملا صحیح می باشد. برای اطمینان بیشتر کد کامل را دانلود نمایید.

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.