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

استفاده از آیکن در سایت | استفاده از Font Awesome

برای استفاده از آیکن ها میتوانید از سایت 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>

استفاده از SVG با جاوا اسکریپت

فایل 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>

اگر می خواهید اطلاعات بیشتری کسب کنید با ما در تماس باشید

در توسعه پردازان(FixDevelop) ما به تعدادی از مشتریان خود در زمینه های طراحی سایت و اپلیکیشن موبایل، طراحی لوگو، خدمات سئو و بهینه سازی کمک کرده ایم تا با گسترش کسب و کار خود بتوانند جایگاه بهتری در دنیای اینترنت داشته باشند.

نظر خود را برای این مقاله ثبت کنید

نظرات

  • محمدجواد زارع
    1400-05-01

    دمتون گرم پست خیلی جالبی بود

  • مهرداد
    1400-01-18

    سلام سایت خیلی خوبی دارید دمتون گرم