برای استفاده از آیکن ها میتوانید از سایت https://fontawesome.com استفاده کنید.
وارد این سایت شوید و بر روی گزینه Start For Free کلیک کنید سپس از قسمت Other Ways to Use با کلیک روی دکمه Download در صفحه باز شده با کلیک روی گزینه Download Font Awesome Free For The Web فولدر مربوطه دانلود خواهد شد.
فایل را از حالت فشرده خارج کنید ، سپس از پوشه css فایل all.css را در پوشه css پروژه خود پیست کنید و پوشه webfonts را نیز به پوشه پروژه خود پیست کنید.
** اگر برای پروژه خود پوشه ای با نام fonts ایجاد کرده باشید میتوانید تنها فایل های داخل پوشه webfonts پیست کنید.
حالا فایل all.css را در باز کنید و در انتهای فایل باید تمام آدرس دهی های @font-face را تغییر دهید .
نحوه آدرس دهی به این صورت است که علامت ( .. ) یعنی از فایل فعلی که all.css است خارج شو و به پوشه fonts یا webfonts برو و فایل های لازم را فراخوانی کن (.eot ،.woff،svg،woff2،ttf)
اگر فایل ها به درستی در پوشه های پروژه پیست شده باشد شما تنها باید آدرس دهی ها را درست کنید :
این پسوندها باید پاک شود (?#iefix ، #fontawesome) سپس تغییرات را ذخیره کنید.
حالا باید فایل css را به تگ <head> اضافه کنید.
<head>
<link href="css/all.css" rel="stylesheet"> <!--load all styles>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style>
<i class="far fa-user"></i> <!-- uses regular style>
<i class="fal fa-user"></i> <!-- uses light style>
<i class="fab fa-github-square"></i> <!-- uses brands style>
</body>
فایل all.js در پوشه jsتمام ویژگی های پایه را بارگیری می کند ، به علاوه تمام سبک های نمادی را که هنگام استفاده از Font Awesome به آنها نیاز خواهید داشت. باید فایل all.js را در پروژه خود قرار دهید
<head>
<script defer src="js/all.js"></script> <!--load all styles>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style>
<i class="far fa-user"></i> <!-- uses regular style>
<i class="fal fa-user"></i> <!-- uses light style>
<i class="fab fa-github-square"></i> <!-- uses brands style>
</body>
آیا می خواهید هنگام استفاده از سبک های خاصی از آیکون ها استفاده کنید؟ شما تنها کافیست فایل css مدنظر خود را در پوشه css خود پیست کنید و تنها کافیست فایل css ها را در داخل تگ <head>فراخوانی کنید.
<head>
<!-- Our project just needs Font Awesome Solid + Brands -->
<link href="css/fontawesome.css" rel="stylesheet>
<link href="css/brands.css" rel="stylesheet>
<link href="css/solid.css" rel="stylesheet>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style>
<i class="fab fa-github-square"></i> <!-- uses brand style>
</body>
دمتون گرم پست خیلی جالبی بود
سلام سایت خیلی خوبی دارید دمتون گرم
محمدجواد زارع
1402-03-13